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内 容 提 要 


Adobe Dreamweaver CS6 是 继 Adobe Dreamweaver CS5 之 后 推出 的 完美 的 网 站 及 网 络 应 
用 程序 制作 软件 ， 新 版 本 趋 癌 于 易 用 快捷 。 本 书 以 理论 与 实践 相 结合 的 方式 ， 循 序 渐进 地 讲 
解 使 用 Dreamweaver CS6 制作 静 、 动 态 网 页 网 站 的 方法 与 技巧 。 

全 书 分 为 3 篇 17 章 ， 人 全面、 详细 地 介绍 了 Dreamweaver CS6 的 特点 、 功 能 、 使 用 方法 和 
技巧 。 具 体内 容 为 : 第 1 篇 “快速 入 门 ” 介绍 了 Dreamweaver CS6 最 基本 的 功能 ， 内 容 包 括 
网 页 制作 基础 、Dreamweaver CS6 简介、 网 站 的 构建 与 管理 、 文 本 与 超级 链接 以 及 HTML 与 
CSS 基础 等 。 第 2 篇 “技能 提高 ” 介绍 了 Dreamweaver CS6 的 高 级 功能 ， 内 容 包 括 表 格 和 
AP 元素、 框架、 表单 的 应 用 、 模 板 与 库 、Dreamweaver 的 内 置 行为 和 动态 网 页 基础 等 。 第 3 
篇 “实战 演练 ” 介绍 了 旅游 网 站 、 儿 童 教育 网 站 、 时 尚 资讯 网 站 和 电子 商务 网 站 4 个 不 同 风 
格 网 站 综合 实例 的 详细 制作 步骤 。 本 书 实例 丰富 、 内 容 翔 实 、 操 作 方 法 简单 易学 ， 不 仅 适 合 
对 网 页 制作 和 网 站 管理 感 兴趣 的 初 、 中 级 读者 学 习 使 用 ， 也 可 供 从 事 网 站 设计 及 相关 工作 的 
专业 人 士 参考 。 

本 书 附 有 一 张 光 盘 ， 内 容 为 教材 综合 实例 部 分 所 有 网 页 文件 的 源 代码 和 操作 过 程 录音 讲 
解 动画 以 及 专 为 教师 授课 准备 的 PPT 文件 ， 供 读者 学 习 和 教师 授课 使 用 。 
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在 网 络 浪潮 中 随 奢 宽带 的 普及 ， 上 网 变 得 越 来 越 方 便 ， 束 连 以 前 只 有 专业 公司 才能 提供 
的 Web 服务 现在 许多 普通 的 宽 珊 用户 也 能 做 到 。 您 是 否 也 有 种 冲动 ， 想 日 己 来 制作 网 站 ， 为 
自己 在 网 上 安 个 家 ? 也 许 你 会 觉得 网 页 制作 很 难 ， 然 而 如 果 使 用 Dreamweaver CS6， 即 使 制 
作 一 个 功能 强大 的 网 站 ， 也 是 件 非 党 容易 的 事情 。 

被 誉 为 “网 页 制作 三 剑客 ”之 一 的 Dreamweaver CS6 是 兰 名 影像 处 理 软 件 公 司 Adobe 最 
新 推出 的 网 页 设计 制作 工具 ， 是 继 Dreamweaver CS4 之 后 的 升级 版 本 ， 是 日 前 最 完美 的 网 站 
制作 工具 。Dreamweaver CS6 是 一 种 专业 的 HTML 编辑 器 ， 用 于 对 Web 站 点 、Web 页 和 Web 
应 用 程序 进行 设计 、 编 码 和 开发 。 无 论 您 喜欢 直接 编写 HTML 代码 , 还 是 偏爱 “所 见 即 所 得 ” 
的 工作 环境 ，Dreamweaver CS6 都 会 为 您 提供 许多 方便 的 工具 ， 助 您 迅速 高 效 地 制作 网 站 。 

全 书 由 3 篇 17 章 组 成 ， 人 全面、 详细 地 介绍 了 Dreamweaver CS6 制作 静 、 动 态 网 页 网 站 


的 方法 与 技巧 。 
第 工 草 介绍 网 页 制作 基础 知识 ， 分 别 介绍 网 页 与 网 站 的 基础 知识 以 及 网 站 建设 的 基本 步 
骤 。 


第 2 章 Dreamweaver CS6 的 基础 知识 ， 包 括 Dreamweaver CS6 的 窗口 ， 文 件 操作 。 

第 3 草 介 绍 站 点 的 基本 知识 及 构建 本 地 站 点 的 方法 ， 包 括 站 点 的 概念 和 功能 ， 站 点 规划 
和 网 站 制作 流程 以 及 对 站 点 内 文件 的 操作 方法 等 。 

第 4 章 介 绍 文本 和 图 像 的 基本 知识 及 应 用 方法 。 包 括 普通 文本 、 特 殊 符 志和 日 期 的 插入 ， 
对 文本 的 格式 设置 以 及 如 何在 网 站 中 应 用 图 像 。 

第 5 草 介 绍 超级 链接 的 基本 知识 及 使 用 方法 ， 包 括 各 种 超级 链接 的 概念 与 功能 ， 创 建 各 
种 超级 链接 的 方法 

第 6 章 介绍 HTML 和 CSS 样式 表 的 基本 知识 及 使 用 方法 。 包 括 HTML 语法 结构 、 常 用 
的 HTML 标签 ，CSS 样式 及 应 用 。 

第 7 半 介 绍 表格 和 AP 元 素 的 基本 知识 及 使 用 方法 。 包 括 插 入 表格 、 拆 分 与 合并 单元 格 、 
草 切 和 粘贴 单元 格 、 删 除 行列 以 及 插入 行 等 操作 ， 创 建 AP 元 素 及 散人 套 AP 元 素 的 创建 与 属 
性 设置 ，AP 元 素 的 管理 ，AP 元 素 与 表格 之 间 的 相互 转化 以 及 显示 与 隐藏 AP 元 素 等 。 

第 8 间 介 绍 框架 网 页 的 基本 知识 及 使 用 方法 。 包 括 框 染 基 本 操作 、 保 存 框架 和 框 染 集 文 
件 、 使 用 链接 控制 框 染 的 内 容 及 框架 的 实际 应 用 等 。 

第 9 章 介绍 表单 的 基本 知识 及 使 用 方法 。 包 括 表单 的 创建 ， 各 种 表单 对 象 的 添加 及 属性 
设置 ， 以 及 表单 的 简单 处 理 等 。 

第 10 章 介绍 Dreamweaver CS6 的 内 置 行为 。 包括 改 变 属性 、 拖 动 AP 元 素 、 检 查 插 件 表 
单 以 及 调用 JavaScript 等 。 

第 11 章 介 绍 如 何 制 作 多 媒体 网 页 。 包 括 在 网 页 中 使 用 声音 ， 插 入 Flash 动画 和 视频 以 及 
搬入 其 他 多 媒体 对 象 。 


IV 


第 12 章 介 绍 模板 和 库 的 基本 知识 及 使 用 方法 。 包 括 创建 模板 ， 定 义 模板 的 可 编辑 区 域 、 
重复 区 域 和 可 选区 域 ， 以 及 库 的 创建 及 使 用 等 。 

第 13 章 介 绍 动态 网 页 基础 。 包 括 如 何 安装 和 配置 IIS 服务器， 制作 动态 网 页 的 步骤 以 及 
连接 数据 库 以 及 绑 定 动态 数据 。 

第 14 章 到 第 17 章 为 综合 实例 ， 详 细 介 绍 了 旅游 网 站 、 儿 童 教育 网 站 、 时 尚 资讯 网 站 和 
电子 商务 网 站 4 个 不 同 风格 网 站 的 详细 制作 过 程 。 

为 了 配合 各 学 校 师 生 利 用 此 书 进行 教学 的 需要 ， 随 书 配 赠 多 媒体 光盘 ,包含 全 书 实例 操作 
过 程 配 音 讲 解 录 屏 AVI 文件 和 实例 结果 文件 和 素材 文件 ,以 及 专 为 老师 教学 准备 的 Powerpoint 
多 媒体 电子 教案 。 

本 书 由 三 维 书屋 工作 室 总 策划 ， 关 仁 喜 、 杨 雪 静 主编 “ 刘 虽 丽 、 康 士 廷 、 张 日 唱 、 盏 培 、 
万 金 环 、 闫 聪 聪 、 卢 园 、 郑 长 松 、 张 俊生 、 李 瑞 、 董 伟 、 王 玉 秋 、 王 敏 、 王 玮 、 王 义 发 、 王 
培 合 、 六 文 形 、 路 纯 红 、 周 冰 、 王 艳 池 、 王 宏 等 也 为 本 书 的 出 版 提供 了 大 量 帮 助 ， 值 此 图 书 
出 版 发 行 之 际 ， 回 他们 表示 衷心 的 感谢 。 

中 主要 内 容 来 自 于 作者 几 年 来 使 用 Dreamweaver 的 经 验 总 结 ， 也 有 部 分 内 容 取 自 于 国 
内 外 有 关 文 献 资 料 。 虽 然 笔 者 儿 易 其 稿 ， 但 由 于 时 间 人 仓促， 加 之 水 平 有 限 ， 书 中 丝 漏 与 失误 
在 所 难免 ， 奶 请 广大 读者 联系 win760520@126.com 提 出 宝贵 的 批评 意见 。 欢 迎 登 录 


www.sjzsanweishuwu.com 进 行 讨论 。 
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1.1 网 页 与 网 站 


在 学 习 网 页 制作 的 方法 和 技巧 之 前 ， 读 者 (尤其 是 网 页 设计 的 初学 者 ) 很 有 必要 和 完了 
解 网 页 与 网 站 的 联系 与 区 别 。 

网 页 是 网 络 上 的 基本 文档 ， 网 页 中 包含 文字 、 图 片 、 声 音 、 动 男 、 影 像 以 及 链接 等 元 
素 ， 通 过 对 这 些 元 素 的 有 机 组 合 ， 就 构成 了 包含 各 种 信息 的 网 页 。 简 单 地 说 ， 通 过 浏览 器 
在 WW 上 所 看 到 的 每 一 个 超 文 本 文件 都 是 一 个 网 页 ， 而 通过 超 链接 连接 在 一 起 的 略 干 个 网 
页 的 集合 即 构 成 网 站 。 

通 钊 网 站 都 有 一 个 能 够 连接 到 网 上 的 惟一 编码 ， 即 IP 地 址 。IP 地 址 是 由 32 位 二 进 制 数 
组 成 的 ， 为 了 便于 记忆 ， 通 常 把 它 分 为 4 组 ， 每 组 8 位 ， 每 组 之 间 用 小 数 点 阳 开 ， 例 如 : 
202.14.5.7。 由 于 IP 地 址 非常 不 便于 记忆 ， 所 以 通常 用 一 串 文学 来 代 蔡 ， 例 如 www.sina.com 
等 ， 这 就 是 域名 。 域 名 也 必须 是 惟一 的 ， 它 由 固定 的 网 络 域名 管理 组 织 在 全 世界 冰 围 内 进 
行 统一 管理 。 

通常 我 们 看 到 的 网 页 ， 都 是 以 .htm、.html、.shtml 等 为 后 级 的 文件 。 在 网 站 设计 中 ， 这 
种 纯粹 HTML 格 式 的 网 页 通 癌 被 称 为 静态 网 页 。 静 态 网 页 的 内 容 是 固定 的 ， 当 用 户 浏览 网 页 
内 容 时 ， 服 务 嚣 仪 仪 是 将 已 有 的 静态 HTML 文 档 传送 给 浏览 占 供 用 户 阅 读 。 辱 网 站 维护 者 要 
更 新 网 页 的 内 容 ， 就 必须 手工 更 新 所 有 的 HTML 文 档 。 因 此 ， 静 态 网 页 的 致命 弱点 就 是 不 易 
维护 ， 为 了 不 断 更 狐 网 页 内 容 ， 束 必须 不 断 地 重复 制作 HTML 文 档 ， 随 着 网 站 内 容 和 信息 量 
的 日 瘟 扩 增 ， 网 页 维护 的 工作 量 无 疑 将 是 非常 巨大 的 。 

在 HTML 格 式 的 网 页 上 ， 也 可 以 出 现 各 种 动态 的 效果 ， 如 .GIF 格 式 的 动画 、FLASH、 深 
动 字母 等 , 但 这 些 动态 效果 只 是 视觉 上 的 , 与 下 面 将 要 介绍 的 动态 网 页 是 完全 不 同 的 概念 。 

所 谓 动 态 网 页 ， 是 指 服务 需 会 针对 不 同 的 使 用 者 以 及 不 同 的 要 求 执 行 不 同 的 程序 ， 从 
而 提供 不 同 的 服务 ， 一 般 与 数据 库 有 关 。 这 种 网 页 通 音 在 服务 占 闹 以 扩展 名 asp、jsp 或 古 
aspx 等 储存 。 动 态 网 页 的 页 面目 动 生 成 ， 无 有 顷 手 工 维护 和 更 狐 HTML 文 档 ， 不 同 的 时 间 、 
不 同 的 人 访问 同一 网 址 时 会 产生 不 同 的 页 面 。 

动态 网 页 与 静态 网 页 的 最 大 不 同 束 是 Web 服 务 器 和 用 户 之 间 的 动态 交互 ， 这 也 是 
Internet 强 大 生命 力 的 体现 。 


1.2 网 站 建设 的 基本 步骤 


在 这 个 Internet 时 代 ，WWW 网 站 和 个 人 主页 浩如烟海 。 要 使 访问 者 从 众多 的 网 站 中 选 
择 访 问 您 的 站 点 , 并 不 是 一 件 位 单 的 事情 。 因此, 要 想 设 计 出 达到 预期 效果 的 站 点 和 网 页 ， 
需要 在 建立 网 站 前 对 用 户 需 求 有 深刻 理解 ， 明 确 建设 网 站 的 目的 ， 确 定 网 站 的 功能 ， 确 定 
网 站 规模 、 投 入 费用 ， 进 行 必要 的 市 场 分 析 等 ， 并 对 人 们 上 网 时 的 心理 进行 认真 地 分 析 研 
穴 。 在 设计 时 这 循 一 些 基本 原则 和 流程 也 是 很 有 必要 的 。 只 有 经 过 详细 策划 ， 才 能 避免 在 
网 站 建设 中 出 现 很 多 问题 ， 使 网 站 建设 能 顺利 进行 。 

本 书 将 通过 一 个 网 站 实例 的 制作 贯穿 各 个 草 市 ， 在 讲解 各 半 知 误 态 的 同时 ， 引 导读 者 
完成 一 个 个 人 网 站 的 制作 。 
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1.2.1 确定 网 站 的 主题 和 目标 用 户 


一 个 网 站 的 成 功 与 盏 与 建站 之 前 的 网 站 规划 有 大 极为 重要 的 关系 。 建 并 网站， 上 首先 要 
对 网 站 及 网 页 的 内 容 、 风 格 进行 规划 。 这 一 阶段 的 任务 主要 是 明确 网 站 的 主题 和 名 称 ， 并 
对 网 站 的 技术 可 行 性 、 经 济 可 行 性 和 时 间 可 行 性 进行 分 析 。 

网 站 的 主题 就 是 网 站 所 要 包含 的 主要 内 容 。 一 个 优秀 的 网 站 其 页 面 必须 做 好 以 下 三 个 
方面 : 内 容 、 速 度 和 风格 。 内 容 是 网 站 的 根本 ， 一 个 成 功 的 网 站 在 内 容 方面 一 定 要 有 独到 
之 处 ， 如 新 浪 的 狐 闻 、 百 度 的 搜索 、 联 众 的 游戏 等 。 无 论 是 个 人 网 站 、 企 业 网 站 还 是 综合 
性 信息 网 站 ， 都 需要 明确 地 树立 目 己 的 主题 和 方 各 ， 在 内 容 组 织 上 要 有 特色 ， 定 位 准确 ， 
内 容 丰 富 ， 且 有 民 好 的 即时 更 新 性 。 

不 同 的 Web 站 点 有 相应 的 浏览 群体 ， 特 定 的 浏览 群体 意味 着 有 特定 的 主题 内 容 ， 根 气 
站 点 所 服务 的 对 象 进 行 设计 定位 ， 才 能 有 的 放 矢 。 例 如 ， 年 轻 人 一 般 都 喜欢 时 尚 资 讯 ， 在 
线 交 流 ， 写 博客 日 六 ， 网 上 购物 等 。 要 设计 一 个 面 问 年 轻 人 的 个 人 网 站 ， 如 有 条 面面俱到 的 
话 ， 势 必要 花费 很 大 的 时 间 和 精力 ， 而 且 会 导致 主题 不 够 明确 。 因 此 网 站 应 该 找到 一 个 突 
破 点 ， 例 如 把 重点 放 在 博客 日 志 上 ， 以 赢得 上 自己 特定 的 用 户 。 

Web 站 点 的 风格 是 指 站 点 的 整体 形象 给 浏览 者 的 感受 。 整 体形 象 包括 站 点 的 CI， 版 面 
布局 ， 浏 览 方 式 ， 交 互 性 ， 文 字 ， 语 气 ， 内 容 等 等 诸多 因素 。 风 格 会 极 大 地 影 啊 谈 者 对 网 
站 的 评价 ， 浏 览 者 不 需要 任何 预先 的 知识 ， 束 可 能 从 Web 站 点 的 视觉 界面 获得 主观 印象 。 
例如 : 迪斯尼 是 生动 活泼 的 〈 如 图 1-1) ; 欧珀莱 是 清新 漂亮 的 〈 如 图 1-2) ; 宝马 是 时 尚 
专业 的 《如 网 1-3) 。 
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图 1-1 迪斯尼 中 国 官方 网 站 


在 定位 风格 时 必须 要 考 碟 以 下 几 点 : 

(1) 确保 形成 统一 整体 和 界面 风格 。 网 页 上 所 有 的 网 像 、 文 字 ， 包 括 背 景 颜 色 、 分 
阳线 、 字 体 、 和 标题、 注脚 等 要 形成 统一 的 整体 。 这 种 整体 的 风格 要 与 其 他 网 站 的 界面 风格 
相 区 别 ， 形 成 目 己 的 特色 。 

(2) 确保 网 页 界面 的 清晰 、 简 洁 、 美 观 。 

(3) 确保 视觉 元 标的 合理 安排 ， 有些 情 况 下 ， 能 让 读者 在 浏览 网 页 的 过 程 中 体验 到 
视觉 的 秩序 感 、 丰 委 感 和 新 奇 感 。 
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图 1-3 军马 中 国 网 站 
风格 的 形成 不 是 一 次 到 位 的 ，Web 制 作 人 员 可 以 在 实践 中 不 断 强化 、 调 整 、 修 饰 ， 直 
到 网 站 达到 独树一帜 的 境界 。 


1. 2.2 规划 网 站 的 栏目 与 版 块 


不 管 是 简单 的 个 人 主页 ， 还 是 复杂 的 、 几 和 王 个 页 面 的 大 型 网 站 ， 对 网 站 的 规划 都 要 放 
到 第 一 步 ， 因 为 它 a 否 达到 预期 的 目的 等 。 
明确 了 网 站 的 主题 和 目标 用 户 之 后 ， 接 下 来 要 依据 网 站 的 主题 ， 仔 细 规 划 和 设计 主题 中 的 
每 个 栏目 与 版 块 。 

例如 ,通常 个 人 网 站 主要 用 于 展现 个 人 风采 。 因 此 网 站 的 主要 内 容 古 个 人 感 兴趣 的 东 
西 ， 如 一 些 精美 的 文章 、 日 志 、 和 学习 笔 记 、 网 站 相册 。 制 作 网 站 的 目的 除了 展示 个 人 的 东 
西 以 外 ， 还 硕 望 能 与 其 他 网 友 交 流 ， 因 此 可 以 添加 留言 板 ; 为 了 加 大 网 站 的 访问 量 ， 或 收 
藏 目 己 喜 欢 的 取材 、 网 站 ， 可 以 添加 友情 链接 。 如 今 电 子 商 务 辟 行 ， 不妨 也 在 个 人 网 站 上 
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开 一 个 简单 的 小 店 ， 将 自己 的 商品 或 需要 换购 的 物 唱 放置 在 个 人 网 站 上 。 


1.2.3 组织 站 点 结构 


组 织 站 点 结构 是 指 编排 网 站 文件 的 目录 结构 。 设 置 站 点 的 弟 规 做 法 是 在 本 地 磁盘 上 创 
建 一 个 包含 站 点 所 有 文件 的 文件 来， 然后 在 该 文件 夹 中 创建 和 编辑 文档 。 当 准备 好 友 布 站 
点 并 人 允许 公众 查看 时 ， 再 将 这 些 文件 复制 到 Web 服 务 嚣 上。 目录 结构 的 好 坏 ， 对 站 点 本 喘 
的 上 传 维护 以 及 以 后 内 容 的 更 狐 和 维护 有 者 重要 的 影 啊 。 

在 建立 目录 结构 时 ， 尽 量 不 要 将 所 有 文件 都 存放 在 根 目录 下 ， 而 是 按 栏 目 内 容 建立 子 
目录 。 例 如 时 尚 资讯 站 点 可 以 根据 时 尚 类 别 分 别 建立 相应 的 目录 ， 如 服饰 、 家 居 、 首 像 、 
美容 等 相应 目录 。 其 他 如 友情 链接 等 需要 经 第 更 狐 的 次 要 栏目 ， 可 以 建立 独立 的 子 目 录 。 
而 一 些 相 关 性 强 、 不 需要 经 第 更 狐 的 栏目 ， 如 关于 本 站 、 联 系 我 们 等 ， 可 以 合并 放 在 统一 
目录 下 。 为 外 ， 在 每 个 主 目 录 下 都 建立 独立 的 images 目 录 ， 用 于 存放 各 个 栏目 中 的 图 片 。 
在 默认 情况 下 ， 站 点 根 日 录 下 都 有 images 目 录 ， 用 于 存放 首页 和 次 要 栏目 的 图 片 。 

此 外 ， 为 便于 维护 和 管理 ， 建 议和 目录 结构 的 层次 不 要 超过 4 层 ， 且 不 要 使 用 中 文 目 录 
名 或 过 长 的 目录 名 。 

本 书 网 站 实例 只 是 个 人 介绍 性 质 的 页 面 ， 主 要 由 四 个 静态 的 页 面 和 一 个 动态 的 页 面 组 
成 ， 因 此 在 建立 目录 的 时 候 ， 可 以 将 其 中 的 页 面 文件 直接 放 在 根 目 录 下 ， 所 有 的 图 厂 放 在 
images 文 件 夹 中 。 

由 于 本 例 中 的 动态 页 面 用 到 了 数据 库 ， 因 此 ， 新 建 一 个 名 为 data 的 文件 夹 放 置 数 据 库 
文件 。 本 例 将 制作 6 个 页 面 ， 下 面 简要 介绍 各 个 页 面 的 路 径 、 名 称 及 功能 。 

(1) index.html: 网 站 的 主页 。 

(2) write.html: 网 站 栏目 “道听途说 ”的 链接 目标 ， 用 于 显示 日 志 或 转贴 文 草 。 

(3) message.html: 网 站 栏目 “ 语 过 添 情 ” 的 链接 页 面 ， 显 示 一 个 留言 板 。 浏 览 者 输 
入 留言 后 单 击 “提交 ”按钮 ， 可 以 将 留言 友 送 给 网 站 制作 者 。 

(4) photo.html: 网 站 栏目 “伊人 风尚 ”的 链接 页 面 ， 显 示 网 站 相册 ， 并 播放 背景 音 
未 

(5) images\xiangce\index.html: 网 站 相册 的 索引 页 。 

其 中 ，images\xiangce 文 件 夹 是 制作 网 站 相册 时 指定 的 目标 文件 夹 。images\photo 文 件 
夹 放 置 生成 相册 的 源 文 件 。 

(6) shop.asp: 网 站 栏目 “我 的 店铺 ”的 链接 页 面 ， 显 示 数 据 库 中 的 商品 编号 、 名 称 、 
类 别 及 图 片 。 


1. 2.4 收集 整理 建站 资源 


了 解 了 网 站 的 主要 目录 结构 后 ， 束 可 以 创建 和 收集 需要 的 建站 资源 了 。 一般 建站 资源 
包括 图 像 、 文 本 和 娩 体 。 收 集 了 这 些 项 目 后 ， 分 门 列 类 地 存放 在 相应 的 文件 来 中 ， 以 便于 
查找 和 管理 。 

一 个 杰出 的 网 站 与 实体 公司 一 样 ， 也 需要 整体 的 形象 包 朔 和 设计 。 准 确 的 、 有 创意 的 


CI 设计 ， 对 网 站 的 宣传 推广 有 事 半 功 借 的 效 宋 。 在 网 站 主题 和 匈 称 定 下 来 之 后 ， 需 要 思考 
的 束 是 网 站 的 标识 。 网 站 的 标识 ， 即 网 站 Logo， 如 同 商 品 的 商标 ， 可 以 使 网 络 浏览 者 易于 
识别 和 选择 网 站 。 一 个 好 的 Logo 人 往往 会 反映 Web 及 制作 者 的 某 些 信息 ， 特 别 是 对 一 个 商业 
Web 来 讲 ， 可 以 从 中 基本 了 解 到 这 个 Web 的 类 型 。 

网 站 Logo 可 以 是 中 文 ， 英 文字 母 ， 和 人 符号， 网 案 ， 也 可 以 是 动物 或 者 人 物 等 。 比 如 : IBM 
是 用 IBM 的 瑞 文 作为 标志 ， 新 浪 用 字母 sina+ 了 眼睛 作为 标志 ， 苹 果 用 一 只 苹果 作为 标志 ， 搜 
狐 用 一 只 卡通 狐狸 作为 标志 。 如 图 1-4 所 示 。 


EE 


图 1-4 和 冀 见 的 Logo 
视觉 上 的 吸引 仅仅 是 Web 设 计 的 一 部 分 ， 为 了 让 读者 方便 地 获得 信息 ， 在 进行 Web 设 
计时 ，Logo 的 形式 应 该 服从 功能 , 形式 的 设计 应 该 尽量 满足 功能 所 需 的 简明 、 清 晰 。 例 如 ， 
2008 年 北京 奥运 开幕 时 ，Google 和 百度 的 首页 Logo 如 图 1-$ 所 示 。 


于 
a i 


图 1-5 ”奥运 开 硕 Logo 
为 了 便于 在 Internet 上 传播 信息 ,天 于 Web 站 点 的 Logo, 国际 上 有 一 个 统一 的 标准 规范 。 
目前 网 站 Logo 有 以 下 三 种 规格 : 
(1) 88*31 一 一 这 是 互联 网 上 最 普遍 的 Logo 规 格 ， 某 些 收集 Logo 的 站 点 所 收集 的 均 
是 这 种 规格 的 Logo。 
(2) 120*60 一 一 这 种 规格 用 于 一 般 大 小 的 Logo。 
(3) 120*90 一 一 这 种 规格 用 于 大 型 Logo。 
一 个 好 的 Logo 应 具备 以 下 的 几 个 条 件 : 
(1) 符合 国际 标准 。 
(2) 传达 网 站 的 类 型 信息 。 
(3) 风格 独特 、 设 计 精 美 。 


1.2.5 网 页 版 面 布局 与 设计 


网 站 建设 的 目的 是 为 用 户 服 务 ， 因 此 应 根据 网 站 建设 的 目的 确定 网 站 的 布局 和 功能 。 
例如 ， 建 立 一 个 电子 商务 网 站 ， 丈 要 根据 消费 者 的 需求 、 购 买 力 、 购 买 习 惯 等 要 系 设 计 网 
页 的 功能 。 

网 站 上 的 内 容 并 不 是 大 量 的 信息 简单 地 堆积 ， 这 些 信 息 必 须 通 过 一 定 的 形式 来 体现 ， 
这 束 是 网 站 结构 、 页 面 外 观 、 页 面 布局 等 。 同 时 网 页 的 设计 要 考虑 到 网 页 的 加 载 速度 ， 不 
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能 因为 网 页 的 加 载 时 间 过 慢 而 使 网 站 的 眼球 数 大 大 降低 。 因 此 ， 网 页 在 设计 上 切忌 使 用 过 
多 、 过 大 的 图 片 和 过 多 的 表格 内 套 。 

第 见 的 网 页 布局 形式 大 致 有 以 下 几 种 : 

1. “ 厂 ” 了 学 型 ”这 种 布局 最 上 方 古 标 题 和 广告 条 ， 页 和 面 下 方 左面 古 灯 单 ， 右 面 显示 
页 面 内 容 ， 整 体 上 类 似 汉子 “ 厂 ”。 这 种 布局 条 理 清晰 、 主 次 分 明 ， 非 党 适合 初学 者 学 习 ， 
但 略微 有 扣 示 极 。 

2. “ 口 ” 邹 型 ”这 种 布局 类 似 一 个 方 框 ， 上 方 是 标题 或 广告 条 ， 下 方 是 版 权 信息 ， 
工 面 是 菜单 ， 右 面 是 友情 链 搁 ， 中 间 是 网 页 效 末 与 主要 内 容 ， 页 面 布局 祭 凑 、 信 息 丰 吝 ， 
但 四 面 封闭 给 入 一 种 压抑 的 感觉 。 

3. “ 同 ” 子 型 ”这 是 一 些 大 型 网 站 肖 页 第 用 的 类 型 ， 在 网 页 最 上 和 耐 是 网 站 的 标题 以 
及 BANNER 广 告 条 ， 接 下 来 唤 是 网 站 的 主要 内 容 ， 堪 右 分 列 一 些 两 小 条 内 容 ， 中 间 是 主要 
部 分 ， 与 左右 一 起 罗列 到 底 ， 最 下 面 是 网 站 的 一 些 基 本 信息 、 联 系 方 式 、 拨 权 声 明 等 。 

4. 海报 型 ”这 种 布局 束 像 我 们 平时 见 到 的 海报 一 样 ， 中 间 是 一 幅 很 醒目 、 设 计 非 党 
并 关 的 图 片 ， 周 围 点 级 看 一 些 图 片 和 文学 链接 。 这 种 设计 第 用 于 一 些 时 尚 类 公司 的 首页 ， 
非常 吸引 人 。 但 大 量 的 运用 图 片 导致 网 页 下 载 速度 很 慢 ， 而且 提 供 的 信息 量 较 少 ， 如 图 1-6 
所 未 。 


图 1-6 海报 型 布局 
5. “三 ” 衬 型 ”上面 是 标题 或 广告 条 一 类 的 内 容 ， 下 面 是 正文 ， 一 些 文 章 页 面 或 注 


册页 面 通 第 采用 这 种 页 面 布局 方式 。 

6. “ 框 保 ”型 ”这 是 一 种 左右 分 为 两 页 的 框架 结构 ， 一 般 左 而 是 号 航 链接 ， 有 时 最 
上 和 面 会 有 一 个 小 的 标题 或 标记 ， 右 而 是 正文 ， 这 种 类 型 结构 非 党 清晰， 一目了然。 大 部 分 
的 大 型 论坛 都 是 这 种 结构 的 ， 一些 企业 网 站 也 喜欢 采用 。 但 是 这 种 结构 在 使 用 框 染 时 有 个 
问题 ， 即 不 容易 被 搜索 引擎 找到 。 如 果 考 寿 a 到 这 一 点 ， 尺 量 少 用 市 框 染 的 页 面 。 

总 之 ， 网 页 布局 设计 要 按照 网 站 的 实际 情况 ， 根 据 网 站 受众 的 喜好 来 设计 。 这 样 才能 
使 网 站 受到 更 多 人 的 欢迎 。 设 计 版 而 布局 之 再 可 以 先 副 出 版 面 的 布局 草图 ， 接 看 对 版 面 布 
局 进行 细 化 和 调整 ， 反 复 细 化 和 调整 后 确定 最 终 的 布局 方案 。 


1.2.6 测试 网 站 


在 确定 好 网 页 的 目标 、 功 能 、 风 格 及 整理 好 素材 后 束 可 以 采用 多 种 方法 和 网 页 制作 工 


其 进行 网 页 的 制作 。 同 时 ,为 了 保证 网 页 的 正确 性 ， 当 网 页 设计 人 员 制 作 完 所 有 页 面 后 ， 
需要 对 所 设计 的 网 页 进行 审查 和 测试 ;测试 主要 是 功能 性 测试 、 完 整 性 测试 和 安全 性 测试 。 


1.2.7 发 布 与 推广 网 站 


在 成 功 进行 完 上 面 的 几 个 步骤 后 ， 网 站 束 可 以 发 布 到 Internet 中 ， 供 人 们 访问 。 在 发 布 
网 站 之 前 ， 必 须 先 申 请 域名 和 空间 ， 以 标识 和 存放 网 站 。 

域名 是 网 站 在 网 络 上 存在 的 标志 ， 对 于 企业 开展 电子 商务 具有 重要 的 作用 ， 被 状 为 网 
络 时 代 的 “环球 商标 ”， 一 个 好 的 域名 可 以 大 大 增加 企业 在 互联 网 上 的 知名 度 。 

申请 完 空 间 和 域名 后 , 驶 可 以 将 网 站 上 传 到 服务 器 , 让 浏览 者 看 到 。 上 传 可 以 利用 FTP 
软件 ， 也 可 以 使 用 Dreamweaver。 有 关 用 Dreamweaver 上 传 发 布 网 站 的 具体 操作 步骤 见 本 书 
第 3 章 。 

网 站 做 好 后 必须 推广 才能 为 更 多 的 网 民 所 知道 ,推广 网 站 的 目的 是 提高 网 站 的 访问 量 
并 达到 得 用 网 络 进行 营销 的 目的 。 网 站 推广 的 手段 有 很 多 ， 主 要 的 推广 技巧 有 : 搜索 引擎 
注册 、 电 子 邮 件 宣 传 、BBS 宣 传 、 注 册 加 入 行业 网 站 、 网 站 合作 、 论 坛 留言 、 新 闻 组 、 互 
换 广 告 条 、 传 统 方式 推广 和 网 络 广告 等 。 由 于 篇 幅 限 制 ， 本 书 不 作 详细 介绍 ， 感 兴趣 的 读 
者 可 以 参阅 相关 资料 。 


其 1 泪 


登 仁 由 丛 枉 洁 可 


二 
江 


证 


可 视 党 


人 加 的 


， 人 .Frowork 


2.1 初次 启 动 Dreamweaver CS6 


安装 完 Dreamweaver CS6 简 体 中 文 版 之 后 ， 双 击 加 和 面 上 有 的 Adobe Dreamweaver CS6 图 
标 , 或 执行 “开始 ”/“ 程 序 ”/“Adobe Dreamweaver CS6” 命 令 , 即 可 局 动 Dreamweaver CS6 
简体 中 文 版 。 第 一 次 局 动 Dreamweaver CS6 时 ,会 弹出 图 2-1 所 示 的 “默认 编辑 器 ”对 话 框 ， 
用 户 可 以 根据 个 人 喜好 将 Dreamweaver CS6 设 置 为 指定 文件 类 型 的 默认 编辑 器 。 


Adobe Dreamweaver CS6 将 其 自身 设置 为 以 下 文件 类 型 的 默认 编辑 器 : 


[Y] Active Server Pages (asp) [网 JavaSseript (Gs) 
回 Java Server Pages (jsp) [网 层 和 样式 袁 (CSS) 
[VColdFusion (ctn，cfc) [四 可 扩展 标记 语言 Ceml) 


ODASP. NET (aspx, ascx) 人 久 XSL 样式 表 (xs1，xslt) 
[YFP (php, php3, php4) 
取消 全 先 


Le 


图 2-1 “ 堆 认 编辑 咒 ” 对 话 杠 


单 击 文件 类 型 左 侧 的 复 选 枉 ， 即 可 选中 相应 的 文件 类 型 。 单 击 “ 确 定 ” 按 钮 即 可 进入 
Dreamweaver CS6 的 用 户 界 面 。 


2.2 ” Dreamweaver CS6 的 窗口 组 成 


启动 Adobe Dreamweaver CS6 简 体 中 文 版 (以 下 简称 Dreamweaver CS6) 之 后 ， 默 认 显 
示 Dreamweaver 的 欢迎 界面 ， 如 网 2-2 所 示 。 


DW_ 二 人 0) 全 哺 (5)， 亚 看 () 手 入 (1 耶 竣 0m) 格式 10) 自信 代 } 允 丰 上 Do) 基 敬 00 天" Or Bh» ENT - I~Io!l x 


林 并 最 近 的 项 目 主要 功能 
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hotneee Cuyet 1 
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和 由 冲击 大 的 剖 过 所 让 


本 本 
欢迎 界面 大 岂 用 条 的 专政 屿 郊 、 术 性 等 且 志 及 让 。 
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图 2-2 Dreamweaver CS6 欢迎 界面 


11 


9G JeAeaAureaId 世 z 法 


> 五 


六 


19 DreamWearer LS 中 垃 版 入门 与 提高 实例 首 C 


该 界面 用 于 打开 最 近 使 用 过 的 文档 或 创建 狮 文档 ， 还 可 以 从 中 通过 产品 介绍 或 教程 了 
解 天 于 Dreamweaver 的 更 多 信息 。 如 果 不 布 望 每 次 启动 时 都 打开 这 个 界面 ， 可 以 在 “前 
选 参 数 ” 对 话 框 中 修改 设置 。 

在 该 界面 上 可 以 看 到 Dreamweaver CS6 集 成 了 Adobe Business Catalyst。 使 用 Business 
Catalyst 面板 ， 用 户 可 以 与 Adobe Business Catalyst@ 平台 《和 需 单 独 购买 ) 连接 来 开发 复 
琳 的 电子 商务 网 站 , 利用 托管 解决 方案 建立 电子 商务 网 站 , 而 无 害 编 写 任 何 服 务 占 病 编 公 。 

在 登录 到 Business Catalyst 站 点 之 后 ， 可 以 直接 从 Dreamweaver 的 “Business 
Catalyst” 面 板 中 管理 Business Catalyst 模块 。 

单 击 欢迎 界面 上 “新 建 ” 栏 目下 的 文档 类 型 ， 或 执行 “文件 ”/ “新 建 ” 命 令 ， 在 打开 
的 “ 狐 建 文档 ”对 话 框 中 选择 “ 空 犁 页 ”类 别 的 HTML 基 本 项 ， 然 后 选择 布局 栏 的 “无 ”， 
早 击 “创建 ”按钮 进入 Dreamweaver CS6 中 文 版 的 工作 界面 ， 如 图 2-3 所 示 。 

单 击 “ 设 计 器 ”按钮 这 乙 "， 在 弹出 的 下 拉 列 表 中 可 以 看 到 Dreamweaver CS6 推 出 的 
11 种 工作 区 外 观 模式 。 不 同 的 工作 区 外 观 模式 适用 于 不 同 层 次 或 喜好 的 设计 者 。 无 论 是 一 
个 程序 员 还 是 一 个 设计 师 ， 都 可 以 在 Dreamweaver CS6 给 出 的 工作 区 外 观 模式 中 找到 合适 
的 页 面 设计 模式 。 
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/上 TrowserLab [ER 


1 代码 | 拆 分 | 设计 | nj 视 且 \ 


布局 、DW 扩 展 和 
站 点 管理 吉 按 钮 


文档 工具 栏 


在 Dreamweaver 中 掏 建 六 发 布 商 业 网 站 
和 和 功能 强大 的 在 线 商 店 . 
Pe se "| 
YY < E | 


立刻 免费 试用 dobe Business 
Catalyst| 


属性 面板 Ee 
<bodv 
尾 性 
| 《<> HTML| ”格式 全 ) | 无 ~ 类 | 无 v 
旧 css IDC) 无 v| 链接 中) 


由 徊 属性 ... 列表 项 上 


文件 [和 


图 2-3” Dreamweaver CS6 的 工作 环境 


2.2.1 菜单 栏 


通常 从 一 个 软件 菜 时 的 多 少 可 以 看 出 这 个 软件 功能 的 大 小 。 同样 , 从 Dreamweaver CS6 


繁复 的 末 蛙 可 以 看 出 其 功能 的 硕大 和 完善 。 与 大 多 数 软 件 类 似 ，Dreamweaver CS6 的 末 单 
加 


栏 位 于 工作 环境 最 上 方 ， 如 图 2-4 所 示 。 
文件 局 ) 编辑 叶 ) 查看 (WW 插入.(I) 修改 册 ”格式 {07 前 仿 ({ 中 ” 站 点 [31 窗口 ( 科 ”和 玫 助 (0 


图 2-4 有 亲 蛙 柱 


2. 2.2 文档 工具 栏 


Dreamweaver CS6 的 文档 工具 柱 主 要 集中 了 一 些 常 用 的 页 面 操作 命令 ， 可 以 用 不 同 的 
方式 来 得 看 文档 窗口 或 者 预览 设计 效果 ， 如 图 2-5$ 所 示 。 


EE ESE" 


图 2-5 ”文档 工具 栏 


该 工具 栏 中 主要 控 钮 的 功能 简 述 如 下 : 
和 型 ， 切 换 到 代码 视图 ， 显 示 当 前 文档 的 代码 ， 如 图 2-6 所 示 。 在 代码 视图 中 可 以 编 
和 辑 插入 的 脚本 ， 对 脚本 进行 检 奋 、 调 试 等 。 


DW * d+ &v 兴国 LOX 
文件 (f] “篇 做 (IJ 坦 夺 (7) 年 和 0 妖 冯 全 ) 格式 0) 傅 令 人 多) 类 虚 信 ) 四 DID 震动 00 
七 融 院 仿 师 时 测 争 天 性 往 此 优 公 品 牌 一 中 国庆 颌 且 二 ， 三 尾 盾 向 身 表 ， 履 成 乳 久生 业 攻 字 htn 

GES MW RehetiveCemtmt js ass Forvieed hi stot php 
| 二 题 ， 瑟 只 7 车 障 时 而 考 表 入 站 不 
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上 = 测 妆 ) 湖 北 ' 上 到 丰 重庆 3 
ws 四 川 > 四 加 ION oN ”~ 斌 广 上 律 Io 
吓 es 太 I 艺 ) 江 务 | ON Values 机 这) 新 江 IT ICN H 
= 本 责 海南 </0FT?09 PION es 广 和 守 ) 产 案 T0& J 
等 = 广告 广 首 ID vale= 放 建 ,福地 IO 
人 | 过 前 | i 吕 | EE | 
3 【西江 面 C/0PTTOR pTINN ni 其 他 > 万 他 T0g TH) 
1; ch ass hi ue*20 typertext as <SPAN 
Inss=" wel STYLES” sd/ SPAN> CTI TROO 7B08Y)?C TAELEY CF TD OBR 
二 Ih 
' 3 lemorenier 1 Spa Th 
全 Th 
n Spas aliar= Let 
bd APLE 0 pacirqg=0 Paddins=0 wid 0%” align= 
女 
| 和 三 tt 
I 8 TT la | SR dhe 15 inilsgr> 投 闹 祯 材 ， 人 
| D vAlier ee width ”1 2 
cr ss=WI WT 1 slue=3 1 严 ec=Tsld ne 
豆 5 万 MPU 1¢ lys ” _e f we 
- + je 这 二 全 上 of SPN 
I ft ip 基 鸭 jus 家 雹 CS 4 有 时 
AE I T BODY ABLE> /TIL R 
TR 
册 i he er colSpar=T slier=left >< 
ih cela 0 1) 汪 给 .着 证 码 ， SpAN; L 
RDER~BOTTOMN-STYLE: #0olid DONDEAR-RIONHT-STYLS: solid. DORDES~TOP-STYLE: #01id 
全 POWDER LiFT- sm; solid 


select (}): ”oo style. ba ee per SE < 
¢his tye “bg crere ne FF rr SAX snaeth 


% 
2252 下 /47 秒 补体 中 文 (082312) 


EY 大 个 | ~ 
- -- - 一 让 总 = mybler 人 
旧 标 需 刚 ODT W 玫 修 内) 默认 李 体 ~ BI 入 要 ;ED his 
| 篇 辑 极 和 大 本 避 ) 12 Ww pr | 4 ‘ 名 Corgamctions 
二 Guin 、 
Cm ) ,六 
他 (Fe) 


图 2-6 ”代码 视图 


1 设计 |， 切换 到 设计 视图 ， 显 示 的 内 容 与 浏览 器 中 显示 的 内 容 相 同 ， 如 图 2-7 所 示 。 

在 “设计 ”视图 中 ， 使 用 Dreamweaver CS6 提 供 的 工具 或 命令 ， 读 者 可 以 方便 地 进行 
创建 、 编 辑 文档 的 各 种 工作 ， 即 使 完全 不 懂 HTML 代 码 的 读者 也 可 以 制作 出 精美 的 网 页 。 

1 拆 分 ， 在 同一 屏幕 中 显示 代码 和 设计 视图 。 

在 编写 文档 过 程 中 ， 有 时 候 读 者 可 能 必须 兼顾 设计 样式 和 实现 代 人 码 ， 这 时 候 就 要 需要 
代码 与 设计 同 屏 显 示 。 单 击 | 拆 分 按钮 ， 就 可 以 实现 这 个 功能 ， 如 图 2=8 所 示 。 这 样 同一 文 
档 的 两 种 视图 就 可 以 在 同一 窗口 中 得 到 对 照 显 示 ， 并且 读者 选中 设计 视图 或 者 代码 视图 中 
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& Dreamfeaver C56 中 文 版 入 门 与 提高 实 便 坟 入 ~ 
的 部 分 时 ， 在 另外 的 代码 视 要 ar 由 相同 的 部 分 例如 ， 在 图 2 就 中 一 
幅 图 厂 ， 那 么 在 代 人 码 视图 中 相应 的 代 人 码 将 以 监 奔 显示 。 

Dreamweaver CS6 界 面 顶端 的 “布局 ”按钮 [图 "| 用 于 设置 页 面 的 布局 ， 与 工作 区 顶端 

内 码 | 拆 分 | 设计 | 按钮 功能 相同 。 如 果 界 面 顶端 没有 显示 布局 、 扩 展 Dreamweaver 和 站 
点 功 和 BE 按钮， 可 以 选择 “窗口 ”/“ 应 用 程序 栏 ” 末 单 命令 显示 这 二 个 功能 按钮 。 


卓志 
交往 iP) 护 码 人 p) 查看 ti 拍 入 I】 眩 鸡 刘 模式 加 ) 此 阁 氏 】 站 点 名 ) 留 口 (8) 帮 且 1H 
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下 EE 
一 i | 条 车 生体 中 区 0313) 莹 这 号 人 - 本 1E E 


| 于 伟 向 | 叶 以 字体 
| 站 小 加 | 抱 


加 2-7 ”设计 视图 


Dw 国 " 总 *” Br 

让 0 铺 幅 吧 ) 查看 WV) 插入 TD) 计 二 i 格式 (0) 世宗 站 处 点 5) 协 器 语 ) 避 助 1m 

七 各 此 安 博时 湖上 天 性 扩 比 二 的 品 收 一 具 国 星 忻 吕 二 ， 三 汇丰 市 闫 要 ， 多 到 隘 疆 二 于 闪 hils » Ea 

et jn i Sure bs gat Php I mr i 

| EA 喇 . 最 性 br 4 区 i 

Rs ne 闻 量 奢 | n 

5 heat= http wu. TOOlodr. CORB, ST Lindex, shtal” CIM: bordersl 
Et 
harder=h at= 寺 本 共产 品 展 示 


,三 斌 城市 莱 怕 ， 侨 品 量 休 创 量 平 辣 _1 ES j 


| | 效 


a 
ts 


[| het J 5 才 TeoLour, Gum, SI Livdex, st ml >*IF: lrdersl 
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图 2-8 代码 /设计 视图 
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执行 “和 奉 看 ”/“ 和 对 直 拆 分 ” 沫 单 傅 令 ， 用户 还 可 以 于 和 直 分 割 文档 窒 日 ， 即 代 人 码 视图 和 
设计 视图 以 垂直 对 比 的 方式 呈现 ， 如 图 2-9 所 示 。 


DW 男 : Sr 只。 讽 秆 加 。 -Io| x | 
支 凰 是 i 捕 蛋 下 7 ”天 看 W ”是 尺 民 I)， 琼 陨 如) 村 式 疝 大 伪 过 六 半点 妨 ) ”窗口 各 ) 攻 肿 i 
七 是 下 过 烛 时而 专 击 长 区 比例 牛 品 研 -= 中 国 旺 昼 届 三 ， 三线 柜 市 营地 情 品 大任 上 | 且 赴 容 ， hi 到 上 
人 友 有 RE 和 
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高 3 全 及 二 三 纯 城 市 美 性 。 侯 品 量 人 创业 平 当 a 急 口 昌 佣 
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球 时 滑 寺 如 性 前 比 优 的 昂 焉 一 昌国 
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图 2-9 ”和 圣 直 拆 分 代码 /设计 视图 


执行 “查看 ”/“ 左 侧 的 设计 视图 ” 采 单 命令 ， 可 以 设置 拆 分 模式 下 设计 视图 显示 在 界 
面 左 侧 或 右 侧 。 
实时 视图 |， 在“ 设计 ”视图 或 “ 拆 分 ”视图 下 ， 单 击 该 按钮 可 以 在 不 打开 一 个 新 的 
浏览 器 窗口 的 情况 下 实时 预 筑 页 面 的 效果 。 再 次 单 击 该 按钮 ， 即 可 返回 到 可 编辑 的 “设计 ” 
钢 图 或 “ 拆 分 ”视图 。 
“实时 视图 ”与 传统 的 Dreamweaver“ 设 计 ” 视 图 的 不 同 之 处 在 于 ， 它 提供 页 面 在 某 
浏览 器 中 的 不 可 编辑 的 、 更 逼真 的 呈现 外 观 。 事 实 上 ， 从 “设计 ”视图 切换 到 “实时 视 
图 ”， 只 是 在 可 编辑 的 “ 议 计 ” 视 几 和 不 可 编辑 的 “设计 ” 视 岁 之 间 进 行 切换 ，“ 人 代码 ” 
视图 保持 可 编辑 状态 ， 因 此 可 以 更 改 代 码 ， 然 后 刷新 “实时 视图 ”， 呈 现 的 屏 攻 内容 会 记 
即 反 映 出 对 代码 所 做 的 更 改 。Dreamweaver CS6 更 新 了 “实时 视图 ”功能 ， 使 用 最 新 版 的 
WebKit 转换 引擎 ， 能 够 提供 绝 佳 的 HIML5S 文 持 。 
如 果 在 “代码 ”视图 下 单 击 该 按钮 ， 则 Dreamweaver 的 工作 界面 目 动 转换 为 “ 拆 分 ” 
视 网 。 
于 时 术 们  ， 在 “实时 视图 ”中 单 击 该 按钮 ，Dreamweaver 将 以 黄色 突出 显示 浏览 器 
为 呈现 访 页 面 而 执行 的 代码 版 本 , 此 代码 是 不 可 编辑 的 , 如 图 2-10 所 示 。 再 次 单 击 该 按钮 ， 
即 可 返回 到 可 编辑 的 “代码 ”视图 。 
“实时 代码 ”视图 中 显示 的 代码 类 似 于 从 浏览 器 中 查看 页 面 源 时 显示 的 内 容 。 
“标题 ”: 设置 文档 的 标题 ， 即 代 但 视图 中 <title>.…</title> 标 签 之 间 的 内 容 。 
Bh ， 文 件 管理 下 拉 菜 单 。 
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2) DreamWeaweriC56 中 文 及 入 门 己 拉 高 实例 者 形 


国 |， 在 浏览 加 中 杞 览 、 畔 试 砚 耐 制作 效果 。 

刷新 设计 视 网 。 

Be W3C 验证 。 使 用 W3C 联机 验证 服务 ， 以 确保 标准 网 页 设计 的 精确 性 。 

全 可 视 化 助理 下 拉 菜 单 。 可 以 使 用 不 同 的 可 视 化 助理 来 设计 页 面 。 

局， 跨 浏 览 器 兼容 性 检查 的 下 拉 菜 单 。 

态 :， 多 屏幕 预览 。 

借助 Dreamweaver CS6 新 增 的 “多 屏幕 预览 ”功能 ， 为 智能 手机 、 平 板 电脑 和 人 台式 机 
进行 设计 。 使 用 媒体 查询 支持 ， 为 各 种 不 | 同 设备 设计 样式 并 将 呈现 内 容 可 视 化 。 


DW WW 0 &" | [~-Iol x 
文章 中) 酌情 伙 ) 亚 着 (W) 斤 入 民 ) 修 避 全 ) 格式 名) 全 全 名) 站 点 人 ) 国 口 (D) 帮助 00 

乐 座机 儿 用 局 网 一 讽 钙 时 而 嫩 嫩 联手 员 芥 名 的 三 条 用 及 网 秽 中 心 him ; ¥ 
[2 下 »» 3 - 
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图 2-10 得 看 页 面 的 实时 代码 
从 菜单 栏 中 选择 “查看 ”1“ 工 具 栏 ” 1“ 文档 ”命令 ， 可 以 打开 或 关闭 文档 工具 栏 


选择 “查看 ”/“ 工 具 栏 ”/“ 标 准 ” 命 令 ， 可 以 打开 或 天 闭 Dreamweaver CS6 的 律 用 工具 
如 图 2-11 所 示 。 


WT J 


图 2-11 利用 工具 栏 


该 工具 栏 中 各 个 按钮 图 标的 功能 简 述 如 下 : 

四， 单 击 该 按钮 ， 打 开 “ 新 建文 档 ” 对 话 框 。 

入 ， 打 开 一 个 文档 , 

三 打开 Adobe Bridge CS6， 通 过 搜索 元 数据 标签 ， 为 访问 管理 文件 、 应 用 程序 和 设 
置 提供 了 中 央 控制 。 它 也 为 访问 Adobe Stock 服务 提供 了 文 持 。 

区 | 保存 当前 文档 。 

态 : 保存 所 有 打开 的 文档 。 

留 : 打印 代码 。 
10 


: 列 切 当前 所 选 内 容 。 

: 复制 当前 所 选 内 容 。 

: 粘贴 王 贴 板 中 的 内 容 。 
: 还 原 上 一 步 操 作 。 

: 重 做 上 一 步 操作 。 


Pe 


2.2.3 “插入 ”面板 


目 Dreamweaver CS4 开 始 ，Dreamweaver 将 “插入 ” 栏 整合 成 了 一 个 浮动 面板 。 由 于 该 
面板 是 Dreamweaver 页 面 设计 中 常用 的 一 个 面板 , 因此 本 书 仍 将 其 作为 Dreamweaver 界 面 组 
成 的 一 部 分 进行 介绍 。 

单 击 文档 窗口 右 侧 浮动 面板 组 中 的 “插入 ” 投 钮 ， 即 可 弹出 以 前 熟悉 的 “插入 ”面板 ， 
如 图 2-12 上 所 示 。 

“插入 ”面板 共有 9 类 对 象 元 素 ， 包 含 一 些 最 名 用 的 项 目 : 第 用 、 布 局、 表单 、 数 据 、 
Spry、jQuery Mobile、InContext Editing、 文 本 和 收藏 严 。“ 插 入 ”面板 的 初始 视图 为 “名 
用 ”面板 ， 单 击 “ 揪 入 ”面板 中 “第 用 ”面板 右 侧 的 倒 三 角形 按钮 ， 即 可 在 弹出 的 下 拉 列 
表 中 选择 需要 的 面板 ， 从 而 在 不 同 的 面板 之 间 进 行 切换 ， 如 网 2-13 上 所 示 。 


tpn 


IN 


上 购 css 样 式 
bP 元 素 


可 。 


常用 

轨 超 级 链 接 汇丰 级 钴 接 - 
”电子 邮件 链接 EE] 电子 邮件 链接 Spry 

3 y jQuery Mobile 
咏 命名 锚 记 点 命名 锚 记 InContext Editinge 
这 ”水平线 坪 ”水平 线 = 文本 
表格 表格 和 

Y 颜色 图 标 
插入 Div 标签 插入 Div 标签 隐 菩 标签 
回 - 图 委 回 - 图 人 
斧 . 媒体 爷 - 媒体 
葛 。” 构件 葛 ”构件 
日 期 日 期 a 

图 2-12 “插入 ”面板 图 2-13 ”在 不 同 面 板 之 间 进 行 切换 


如 条 要 在 文档 中 添加 茶 一 个 对 象 ， 打 开 相 应 关 别 的 插入 面板 ， 然 后 单 击 相应 的 网 标 即 


默 认 状 态 下 ， 


“插入 ”面板 中 的 对 象 图 标 以 灰色 显示 ， 忌 标 移 动 到 图 标 上 时 显示 为 彩 


色 。 如 采用 户 习惯 于 彩色 图 标 ， 可 以 打开 图 2-13 右 图 所 示 的 下 拉 列 表 之 后 ， 单 击 “ 颜 色 图 
标 ” 命 令 ， 即 可 以 彩色 显示 对 象 图 标 ， 如 图 2-14 所 未 。 


如 条 单 击 下 拉 列 表 中 的 “隐藏 标签 ” 


命令 ， 


即 可 只 显示 对 象 匈 标 ， 如 见 2-15 上 所 未 。 


六 或 9SD IJoAesArueaId 项 z 渤 


一 


DreamWearer C586 中文 豚 入 门 与 提高 实例 击 形 


党 用 了 


国 国 图 - 争 - 国 其 己 


常用 
超级 链接 
电子 邮件 链接 
命名 锚 记 
水 幸 线 


表格 
插入 Div 标签 


图 2-14 以 彩色 岁 标 显示 的 “名 用 ” 栏 图 2-15 ”隐藏 标签 的 “和 用 ” 柱 


2.2.4 工作 区 


文档 窗口 是 Dreamweaver 的 主 工作 区 ， 用 于 显示 当前 创建 或 者 编辑 的 文档 ， 可 以 根据 
用 户 选 择 的 显示 方式 显示 不 同 的 内 容 。 图 2-16 所 示 的 界面 中 显示 设计 或 代 人 码 的 区 域 即 为 工 
‘Es 


DW 国 r” 必 vr 品 v 设计 器 - 王 | 口 | x 
文件 他 ) 编辑 (EF) 查看 0) 插入 (I) 修改 人 格式 (0) 命令 (5) 站 点 (3) 窗口 (内 和 帮 助 (0D 

【 石 索 庄 汽 车 网 石 关 庄 车 市 _ 石 衣 庄 汽车 恨 价 _ 石 过 庄 汽 车 团购 忠 务 】_ 另 车 网 . htm x 
EH 4 index_style-2012062 


0904. css index_]js_c_120503.]s sense.j]s dropdownlist.]s ady 下 


| 实时 视图 i 
[| 全 二 区 四 电 
更 受 欢 | FONT-SIZE 
长 安 通 PADDING-BO... 0 
z01 0 Re PADDING-LEFT 


-| NT NT | 本 PADDING-RISHIT Dpx 
3 喜 SN TY - HEETR 1 PADDING-TOF 


1 1 
人 bt 


页 签 显示 文件 名 ， | . 
现 内 请 | 配置 | 安全 | 动力 | 试 思 体验 : 一 一 
单 击 页 签 可 以 在 多 个 打 [i 下 pi 


《法 车 推荐 ， 试 吕 东 本 中 高 六 IP7 艾 力 绅 
开 的 文件 之 间 进 行 切换 日 将 上 市 “五 月 份 执 销 合资 小 型 车 盘点 


加 索 谍 昭 曝光 
当前 文件 的 外 


bp 售 11. 98 万 元 起 i -一 一 一 
部 链接 文件 源 代码 。 Bo 到 


府 二 50 万 大 奖  ， : 


经 济 实用 的 执 销 微型 车 盘点 。; 突出 俘 认 起 加 日 产 新 轩 竟 


改 款 雷 诺 Espace 细 节 图 曝光 
吉利 6&T 牢 型 6 月 底 批 量 上 市 
本 田 新 一 代 雅 阁 内 饰 首 曝光 
i 实 拍 2012 款 雷克萨斯 Gx400 ve 国 [ema 加 


DZ 一 情 、 
本 加 | 
<body. on festival> <div. bit top> <div. bit950> [RN | 电驴 lo vy 回转 [ 750 x 462w T31 KF 16 秒 


<> HTIIL 目标 规则 .bit_top .bit950 bd 字体 (0) | 宋体 , hrial, Helvetica, sans-seri vB 
[Bcss] 过 沁 规 则 “] 35 而 名 F | 大 小 人) El | 


页面 属性 ... 


名 G58 人 台 洲 色 信 | 避 


日 BB 站 点 - myblog (C... 
加 bin 
由 .加 Connections 


图 2-16 ”文档 窗口 


整个 文档 窗 旧 可 以 分 为 左右 两 个 大 的 部 分 ， 左边 是 工作 区 域 ,， 右边 是 提供 帮助 的 浮动 
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面板 组 。 展 开 右 侧 的 浮动 面板 组 之 后 ， 拖 动 两 部 分 中 间 的 分 界 柱 可 以 调整 左右 两 部 分 的 宽 
度 。 


2. 2.5 状态 栏 


Dreamweaver CS6 的 状态 栏 位 于 文档 窗口 底部 ， 航 有 三 个 重要 的 工具 : 标签 选择 器 、 
窗口 大 小 弹出 有 来 单 和 下 载 指示 融 ， 分 别 用 于 显示 和 控制 文档 源 代 但 ， 显 示 页 面 大 小 ， 奏 看 
传输 时 间 等 ， 如 图 2-17 所 示 。 


手 形 工具 纠 必 员 率 平板 电脑 大 小 


J 
阮 sdy3 | 寺 忆 om ~ 国 加 到 | 6895 x Se2v 1 KE/1 输 Whicode (TP-8) 
标 宣 选择 坪 选 职工 具 绽放 工具 ”手机 术 小 | 窗口 术 小 编码 方式 . 
蝶 甸 电脑 二 小 


图 2-17 ”状态 栏 

下 面 对 状 态 栏 中 各 个 功能 区 进行 徐 单 介绍 。 

1. 标签 选择 器 ”显示 当前 选 定 内 容 的 标签 的 层次 结构 。 单 击 该 层次 结构 中 的 任何 标 
签 ， 可 以 选中 页 面 上 相应 的 区 域 。 例 如 ， 单 击 <body> 标签 可 以 选择 文档 的 全 部 正文 。 

2. 选取 工具 | 单 击 该 图 标 可 以 启用 /禁用 手 形 工具 。 

3. 手 形 工 具 晤 ”启用 手 形 工具 之 后 ， 在 文档 上 单 击 并 按 下 和 鼠标 左 键 移动 ， 可 以 在 文 
档 窗口 中 拖 动 文档 。 单 击 选 取 工 具 可 禁用 手 形 工具 。 

4. 缩放 工具 和 缩放 比率 ”该 工具 上 只 在 “设计 ”视图 下 可 见 ， 用 于 设置 文档 的 缩放 比 
深 ， 以 便 查 看 图 形 的 像素 精确 上 度 ， 轻 松 地 选择 小 项 目 、 使 用 小 文本 设计 页 面 和 设计 大 页 面 

单 击 选 中 缩放 工具 | 号 之 后 ， 执 行 下 列 操作 之 一 可 以 放大 文档 : 

在 页 面 上 需要 放大 的 位 置 单 击 ， 直 到 获得 所 需 的 放大 比 座 。 
在 页 面 上 需要 放大 的 区 域 上 拖 出 一 个 框 ， 然 后 释放 鼠标 按钮 。 
从 “缩放 比率 ”弹出 式 玉 单 中 选择 一 个 预先 设置 的 缩放 比率 。 
在 “缩放 比率 ”文本 框 中 键入 一 个 缩放 比率 后 按 Enter 键 。 

若 要 缩小 文档 ， 可 以 单 击 选中 缩放 工具 让 之 后 ， 按 下 Alt (Windows) 键 或 Option 
(Macintosh) 键 的 同时 在 页 面 上 单 击 。 

如 有 果 和 希望 将 页 面 上 选 定 的 内 容 填 充 整 个 文档 窗口 ， 可 以 在 “缩放 比率 ”弹出 式 滋 单 中 
选择 “符合 所 选 ” 命 令 ; 如 果 和 硕 望 用 整个 页 面 填充 文档 窗口 ， 则 选择 “符合 全 部 ”命令 ; 
如 果 和 硕 望 页 面 显示 的 宽度 与 文档 窗口 的 宽度 相符 ， 则 选择 “符合 宽度 ”命令 。 

缩 放 文 档 后 ， 单 击 状态 栏 上 的 选取 工具 ， 即 可 在 缩放 后 的 页 面 上 进行 编辑 。 

5. 手机 大 小 、 平 板 电脑 大 小 和 时 和 面 电脑 大 小 “这 一 组 工具 按钮 可 以 将 文档 窗口 快速 
调整 到 合适 的 大 小 。 单 击 手 机 大 小 按钮 四， 可 以 将 窗口 大 小 调整 到 480X800; 单 击 平板 
电脑 大 小 按钮 贺 |， 可 以 将 窗口 调整 到 768X1024; 单 击 桌面 电脑 大 小 按钮 转 ,， 可 以 将 窗 
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> 或 9SD I9AB3MUIP3IG 好 ZZ 泪 


DS 


4 DreonECRERELCSO 中 文 重 入门 与 提高 实例 第 有 


口 宽度 调整 为 1000， 高 度 则 根据 当前 窗口 大 小 进行 调整 。 

6. 窗口 大 小 ”窗口 大 小 弹出 末 单 仅 在 “设计 ”视图 下 可 见 ， 用 于 调整 “文档 ”窗口 
的 大 小 到 预定 义 或 自 定 义 的 尺寸 ， 以 像素 为 单位 。 通 过 “窗口 大 小 ”弹出 采 单 ， 网 页 设计 
者 可 以 但 看 页 和 面 在 不 同 分 辩 京 下 的 视图 显示 情况 。 显 示 的 窗口 大 小 反映 浏览 旨 窗 口 的 内 部 
尺寸 (不 包括 边框 )。 显 示 器 大 小 列 在 括号 中 。 例 如 ， 如 果 访 问 者 可 能 按 其 默认 配置 在 分 
状 率 为 640X480 的 显示 器 上 使 用 Microsoft Internet Explorer 或 其 他 浏览 器 ， 则 设计 页 面 
时 应 使 用 “536 X196 (640 X 480， 默 认 ) ”的 大 小 。 


| 注意: 
a 在 Windows 中 ， 用 户 可 以 将 “文档 ”窗口 最 大 化 以 便 它 填充 集成 窗口 的 
整个 文档 区 域 ， 此 时 无 法 调整 它 的 大 小 。 


7. 下 载 文 档 大 小 /下 载 时 间 ”在 状态 柱 上 ， 文 档 大 小 和 下 载 时 间 区 域 显 示 当 前 编辑 文 
档 的 大 小 《以 千 罕 节 为 单位 ) ， 以 及 该 文档 在 Internet 上 被 完全 下 载 的 预计 时 间 。 针 对 不 
同 的 下 载 速 率 ， 下 载 时 间 当 然 也 不 相同 ， 用 户 可 以 在 “首选 参数 ”对 话 框 中 放置 计算 下 载 
时 间 的 连接 速度 〈 以 KB/s 为 单位 ) 。 

8. 编码 方式 ”该 区 域 显 示 当 前 文档 的 文本 编码 。 


2. 2.6 属性 面板 


在 Dreamweaver CS6 中 ， 选 中 某 一 个 对 象 之 后 ，“ 属 性 ”面板 将 显示 被 选中 对 象 的 属 
性 。 用 户 还 可 以 在 属性 面板 中 修改 被 选 对 象 的 各 项 属性 值 。 属 性 面板 如 图 2-18 所 示 。 


图 2-18 ”属性 面板 
单 击 属性 面板 右上 方 的 六 图 标 ， 可 以 打开 Adobe Dreamweaver CS6 的 帮助 文件 ， 并 显 


示 与 当前 操作 相关 的 帮助 信息 。 

单 击 属性 面板 右 侧 的 区 图 标 ， 可 以 打开 快速 标签 编辑 器 ， 编 辑 页 面 标签 。 

单 击 属性 面板 右上 角 的 选项 菜单 按钮 上 下 ， 在 弹出 的 下 拉 列 表 中 选择 “关闭 ”或 “ 关 
闭 标签 组 ”命令 则 可 以 在 界面 上 隐藏 属性 面板 。 如 果 要 显示 属性 面板 ， 可 以 执行 “窗口 ” 
/“ 属 性 ”菜单 命令 。 

属性 面板 一 般 分 成 上 下 两 部 分 。 不 同 的 对 象 有 不 同 的 属性 ， 因 此 选中 不 同 对 象 时 ， 属 
性 面板 显示 的 内 容 是 不 相同 的 。 单 击 面板 右 下 角 的 折 炙 按钮 冯 可 以 关闭 属性 面板 的 下 部 分 ， 
单 击 后 效果 如 图 2-19 所 示 。 


v BI 江 拉 和 些 些 标题 0 
Y 岛 品 目标 (6) 


图 2-19 ”下 半 部 分 折 登 后 的 属性 面板 
此 时 扩 吞 按钮 兰 灾 成 展开 投 钮 芭 ]， 单 击 此 按钮 可 以 重新 打开 属性 面板 的 下 部 分 。 
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2.2.7 浮动 面板 


在 Dreamweaver CS6 工 作 环境 的 右 侧 存 在 看 许多 浮动 面板 。 局 动 Dreamweaver CS6 后 ， 
有 些 浮 动 面 板 已 经 打开 ， 更 多 的 则 没有 显示 。 这 些 面 板 可 以 自由 地 在 界面 上 拖 动 ， 也 可 以 
将 多 个 面板 组 合 在 一 起 ， 成 为 一 个 选项 卡 组 ， 在 默认 的 情况 下 ，Dreamweaver CS6 中 的 浮 
动 面 板 都 是 成 组 排列 于 工作 环境 的 右 侧 ， 并 且 目 动 排 齐 。 

在 菜单 栏 中 的 “窗口 ”下 拉 沫 单 中 单 击 面板 名 称 可 以 打开 或 者 关闭 这 些 面 板 。 例 如 ， 
要 打开 “行为 ”面板 可 以 执行 “窗口 ”/“ 行 为 ”命令 。 各 个 面板 的 功能 : 

CSS 样式 : 定义 、 编 辑 CSS 样式 。 

CSS 过 渡 样 式 效 果 : 创建 CSS 过 渡 效 果 。 使 用 CSS 过 渡 效 果 可 将 平滑 属性 变化 应 
用 于 页 面 元 素 ， 以 啊 应 触 友 闫 事件 ， 如 巧 停 、 单 击 和 聚焦 。 

jQuery Mobile 色 板 : 使 用 此 面板 可 以 在 jQuery Mobile CSS 文件 中 预 筑 所 有 人 色 板 〈( 主 
题 ) ,或 从 jQuery Mobile Web 页 的 各 种 元 素 中 删除 色 板 。 使 用 此 功能 还 可 将 色 板 逐个 应 
用 于 标题 、 列 表 、 按 钮 和 其 他 元 素 。 

AP 元 素 : 管理 页 面 中 的 AP 元 素 ， 如 AP 元 素 的 显示 与 隐藏 、 堆 车 顺序 等 。 

数据 库 : 新 建 、 修 改 、 删 除数 据 库 的 连接 。 

绑 定 : 管理 数据 集 ， 添 加 各 种 变量 等 。 

服务 器 行为 : 利用 数据 集 生 成 各 种 服务 器 端的 行为 。 

组 件 : 管理 预 置 的 页 面 组件 。 

文件 :管理 本 地 计算 机 的 文件 及 站 点 文件 。 

资源 : 管理 站 点 资源 ， 比 如 模板 、 库 文件 、 各 种 媒体 、 脚 本 等 。 

代码 户 断 : 收集 、 分 类 一 些 非 党 有 用 的 小 代码 ， 以 便 以 后 反复 使 用 。 

标签 检查 需 : 方便 用 户 添 加 标签 的 各 项 属性 、 帮 助 书写 代码 ， 也 可 以 帮助 检查 代码 书 
与 是 省 正 俩 。 

Business Catalyst: 在 Dreamweaver 中 构建 并 发 布 商业 网 站 和 功能 强大 的 在 线 商 店 。 在 
登录 到 Business Catalyst 站 点 之 后 ， 可 以 直接 在 该 面板 中 管理 Business Catalyst 模块 。 

行为 : 为 页 面 元 素 添加 、 修 改 Dreamweaver 预 置 的 行为 和 事件 。 

结果 : 提供 HTML、CSS、ASP、JSP 等 一 系列 代码 的 参考 资料 、 奉 找 和 和 谷 换 ， 验 证 
是 含有 代 但 销 误 ， 检 得 各 种 浏览 右 对 当前 文 梢 的 文 持 情况 ， 检 验 是 售 存 在 断 点 链接 ， 生 成 
显示 站 点 报告 ， 记 录 FTP 登录 和 操作 信息 ， 以 及 站 点 服务 占有 的 测试 结果 。 

历史 记录 : 显示 了 从 打开 或 者 创建 当前 文档 开始 所 执行 的 所 有 操作 步骤 ， 利 用 和 它 可 以 
撤销 一 个 或 者 儿 个 步 又 ， 并 可 将 选 定 步 又 日 动 应 用 于 其 他 页 面 元 素 或 男 存 为 命令 ， 以 便 午 
复 使 用 。 


区 注意 : 
2 “历史 记录 ”面板 只 有 在 设计 视图 中 才能 使 用 ， 在 代码 视图 下 ， 此 面板 


是 无 效 的 。 在 代码 视图 中 更 改 了 文档 ， 不 会 在 “历史 记录 ”面板 中 留 下 记录 ， 当 然 也 
就 无 法 撤销 操作 了 。 
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框架 管理 页 面 框架 。 

代码 检 查 右 : 在 单独 的 编 公 窗 日 中 人 查看、 编写 或 编辑 代 人 码 ， 就 像 在 “代码 ”视图 中 工 
作 一 样 。 还 可 以 查看 代 人 码 中 所 有 JavaScript 或 VBScript 图 数 的 列表 ， 并 跳 转 到 其 中 的 任 

扩展 : 在 Dreamweaver 中 添加 和 管理 扩展 功能 。 

扩展 功能 是 一 些 可 以 很 容易 地 添加 到 Dreamweaver 中 的 新 功能 ， 例 如 用 于 重 儿 设置 
表格 格式 、 连 接 到 后 端 数据库 或 者 帮助 用 户 为 浏览 器 撰写 脚本 的 扩展 功能 。 如 果 要 但 找 
Dreamweaver 最 新 的 扩展 功能 ， 可 以 登录 Adobe Exchange Web 站 点 ， 网 址 为 


www.adobe.com/go/dreamweaver_exchange_cn/。 


\ 注意 : 

< 在 安装 扩展 功能 前 必须 安装 功能 扩展 管理 器 。 功能 扩展 管理 器 是 一 个 独立 
的 应 用 程序 ， 可 用 于 安装 和 和 管理 Adobe 应 用 程序 中 的 扩展 功能 。 如 果 要 在 多 用 户 操 
作 系 统 中 安装 所 有 用 户 都 能 访问 的 扩展 功能 ， 必 须 以 管理 员 身 份 (Windows ) 或 Root 
身份 (Mac 0S X) 登录 。 


从 上 面 的 介绍 可 以 看 出 ，Dreamweaver 的 面板 综合 起 来 功能 极其 强大 。 细 心 的 谈 者 可 
能 会 发 现 ，Dreamweaver 早 期 版 本 中 存在 的 时 间 轴 在 Dreamweaver CS6 中 己 不 见 踪影 了 。 为 
了 提升 程序 效能 以 及 更 容易 开发 和 维护 系统 ，Dreamweaver CS6 在 推出 新 技术 的 同时 也 拿 
控 了 一 些 不 党 使 用 或 普通 用 户 不 用 的 功能 ， 时 间 轴 束 古 其 中 之 一 。 

Dreamweaver CS6 三 个 重要 的 功能 分 别 是 网 页 设计 、 代 人 码 编写 和 应 用 程序 开发 ， 相 应 
的 浮动 面板 也 可 以 这 样 分 类 。Dreamweaver CS6 的 浮动 面板 继承 了 以 前 版 本 的 面板 属性 ， 
可 以 方便 地 拆 分 和 组 合 。 下 面 以 将 “AP 元 系 ” 面 板 从 “CSS 样 了 ”面板 组 中 拆 分 出 来 ， 然 
后 合并 到 “插入 ”面板 组 为 例 ， 详 细 介 绍 拆 分 和 组 合 面 板 的 操作 方法 。 

(1) 选择 “窗口 ”/“AP 元 素 ” 命 令 ， 打 开 “AP 元 系 ” 和 面板 。 
(2) 单 击 “AP 元 素 ” 和 面板 的 标签 ， 按 下 羽 标 左 键 ， 然 后 拖 动 到 合适 的 位 置 ， 释 放 有 也 
标 。 此 时 “AP 元 素 ” 和 面板 成 为 一 个 独立 的 面板 ， 可 以 在 工作 界面 上 随意 拖 动 ， 如 图 2-20 所 


一 一 


小。 


(3) 单 击 “AP 元 素 ” 面 板 的 标签 ， 按 下 鼠标 左 键 ， 然 后 拖 动 到 浮动 面板 组 中 “插入 ” 
面板 的 下 方 ， 此 时 ，“ 插 入 ”面板 底 冰 将 显示 一 条 复 色 的 粗 线 ， 表 示 “AP 元 素 ” 面 板 将 到 
达 的 目的 位 置 。 释 放 鼠 标 ， 即 可 将 “AP 元 素 ” 和 面板 重新 排列 在 浮动 面板 中 ， 如 图 2-21 上 所 示 。 
加 插入 


二 hf 元 未 


骂 css 样 式 


5 文件 
国 资源 


< 只 :二 


图 2-20 下 分离 出 的 “AP 元 素 ” 面 板 图 2-21 组 合 AP 元 素面 板 
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此 时 ， 单 击 浮动 面板 组 中 的 “AP 元 对 面板， 即 可 展开 面板 组 ， 如 网 2-22 所 示 。 


AP 元 素 > | 7 三 
插入 
中 防止 重 秋 全 ) . 


| | 


图 2-22 ”展开 面板 组 


从 上 图 可 看 出 ，“AP 元 系 ” 和 面板 已 和 “插入 ”和 面板 组 合成 一 个 和 面板， 单 击 面板 组 顶端 
的 标签 ， 即 可 在 “插入 ”面板 和 和 “AP 元素 ”面板 之 间 进 行 切换 。 

在 实际 使 用 中 ， 用 户 应 该 根据 目 己 的 设计 习惯 ， 将 钊 用 的 面板 组 合 在 一 起 ， 并 放 在 适 
当 的 地 方 ， 以 配置 出 最 适合 于 个 人 使 用 的 工作 环 昔 。 


2.2.8 标尺 、 网 格 与 辅助 线 


使 用 标尺 、 网 格 和 辅助 线 可 以 很 方便 地 布局 对 象 ， 并 能 了 解 编 辑 对 象 的 位 置 。 

1. 标尺 ”选择 “查看 ”/“ 标 尺 ”/“ 显 示 ” 命 令 即 可 显示 标尺 。 在 文档 编辑 窗口 拖 动 
忌 标 时 ， 在 标 贱 上 能 奏 看 到 当前 鼠标 位 置 的 坐标 。 再 次 选择 “ 答 看 ”/“ 标 矿 ” 命 令 可 以 隐 
闫 标 凡 。 在 “和 奋 看 ”/“ 标 太 ” 命 令 的 子 命令 中 ， 还 可 以 根据 设计 需要 设置 标 太 的 原点 位 置 
和 单位 。 

2. 网 格 ”网 格 是 文档 窗口 中 纵横 交错 的 直线 ， 通 过 网 格 可 以 精 傅 定位 图 像 对 象 。 

选择 “ 俘 看 ”/“ 网 格 ”/“ 显 示 网 格 ” 命 令 ， 即 可 在 文档 编辑 窗口 中 显示 网 格 。 

选择 “但 看 ”/“ 网 格 ”/“ 徘 章 到 网 格 ” 命 令 ， 在 文档 中 创建 或 移动 对 象 时 ， 束 会 日 
动 对 并 距离 最 近 的 网 格 线 。 

选择 “但 看 ”/“ 网 格 ”/“ 网 格 设置 ”命令 ， 在 弹出 的 “网 格 设 管 ” 对 话 框 中 可 以 设 
置 网 格 的 参数 ， 如 颜色 、 间 隔 和 线 型 。 

3. 辅助 线 ” 使 用 辅助 线 可 以 更 精确 地 排列 图 像 ， 标 记 图 像 中 的 重要 区 域 。 将 鼠标 移 
到 标尺 上 ， 按 住 也 标 左 键 并 拖 动 到 文档 中 合适 的 位 年 释放 ， 可 添加 辅助 线 ， 如 图 2-23 所 未 。 
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图 2-23 ”添加 辅助 线 
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将 辅助 线 座 加 到 页 面 上 亏 后 ， 用 户 还 可 以 根据 需要 对 辅助 线 进 行 编辑 。 

(1) 移动 辅助 线 。 将 鼠标 移 a 到 辅助 线 上 ， 当 上 鼠标 指针 变 成 双 篆 头 时 拖 动 辅助 线 ， 即 
可 改变 辅助 线 的 位 置 。 如 果 要 将 辅助 线 精确 定位 ， 可 以 双击 辅助 线 ， 在 弹出 的 对 话 框 中 输 
入 辅助 线 的 具体 位 置 ， 即 可 将 该 辅助 线 移 到 指定 的 位 置 。 

(2) 锁定 辅助 线 。 选 择 “ 奉 看 ”/“ 辅 助 线 ”/“ 锁 定 辅助 线 ” 命 令 即 可 锁定 辅助 线 ， 
锁定 后 的 辅助 线 不 能 被 移动 。 再 次 选中 该 命令 ， 即 可 解除 对 辅助 线 的 锁定 。 

(3) 删除 辅助 线 。 将 鼠标 移 到 辅助 线 上 ， 然 后 按 下 忌 标 左 键 将 其 拖 动 到 文档 范围 之 
外 即 可 。 

(4) 显示 /隐藏 辅助 线 。 选 择 “ 奋 看 ”/“ 辅 助 线 ”/“ 显 示 辅 助 线 ” 命 令 即 可 。 

(5) 对 齐 辅助 线 。 选 择 “ 奏 看”/“ 辅 助 线 ”/“ 对 齐 辅助 线 ” 命 令 。 在 文档 中 创建 或 
移动 对 象 时 ， 就 会 自动 对 齐 距离 最 近 的 辅助 线 。 

(6) 编辑 辅助 线 。 选 择 “ 查 看 ”/“ 辅 助 线 ”/“ 编 辑 辅 助 线 ” 命 令 ， 在 弹出 的 “辅助 
线 ” 对 话 框 中 可 以 设置 辅助 线 的 各 项 参数 ， 包 括 辅助 线 的 颜色 等 。 


2.3 文件 操作 


Dreamweaver 的 文件 操作 可 以 看 作 是 制作 网 页 的 基本 操作 ， 它 包括 新 建文 件 、 打 开 文 
件 、 导 入 文件 、 保 存 和 关 轩 文件、 设置 文 档 属 性 等 。 


2.3.1 新建、 打开 文件 


创建 新 的 网 页 文件 ， 有 以 下 两 种 方法 : 
(1) 执行 “文件 ”/“ 新 建 ” 命 令 ， 在 弹出 的 如 图 2-24 所 示 的 “新 建文 档 ” 对 话 框 中 ， 
选择 想 要 创建 文件 的 基 型 和 布局 ， 然 后 单 击 “创建 ”按钮 ， 即 可 创建 新 文件 。 


布局 : 

HTNL E> 

HTIWML 模板 1 列 固定 ， 拓 中 

XSLT( 整 页 ) 1 列 固定 ， 拓 中， 标题 和 脚注 
XSLT( 片断 1 列 液 态 ,居中 

1 列 液 窟 ,， 居 中， 标题 和 脚注 

2 列 固 定 ， 右 侧 栏 

2 列 固定 ， 右 人 出 栏 、 标 题 和 脚注 
2 列 固定 ， 去 训 栏 

2 列 固定 ， 左 侧 栏 、 标 题 和 脚注 
2 列 洪 态 ， 右 训 栏 

2 列 滞 态 ， 右 侧 栏 、 标 题 和 脚注 
2 列 液 态 , 左 侧 栏 

2 列 液态 , 左 侧 栏 、 标 题 和 脚注 ITIL 文档 
3 列 固 定 

3 列 固 定 ， 标 题 和 脚注 
3 列 滞 态 

3 列 滞 态 ， 标 题 和 脚注 
HTWL5: 2 列 固 定 ， 右 人 出栏。 标题 和 上肢 
HTML5: 3 列 固 定 ， 标题 和 脚注 


| 
团 | 
必 3 
ea 


[|] <6 页 
国 科 空 村 板 


[流体 网 格 布局 


示 便 中 的 页 
其 他 


次 档 类 型 : |XHTWL 1.0 Transitional Y | 


附加 css 文件 : 动 


图 2-24 “新 建文 档 ” 对 话 框 
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Dreamweaver CS6 更 新 并 简化 了 GSS 起 始 布局 一 使 用 预定 义 的 页 面 布局 和 代码 模板 ， 
可 以 快速 地 创建 出 专业 的 页 面 。 此 外 ， 用 户 还 可 以 创建 目 己 的 CSS 布局 ， 并 将 它们 添加 
到 配置 文件 夹 中 。 

Dreamweaver CS6 狐 增 了 能 够 及 时 啊 应 的 流体 网 格 布局 ， 使 用 基于 CSS3 的 流体 网 格 
生成 Web 页 时 ， 布 局 及 其 内 容 会 上 自动 适应 用 户 的 得 看 装置 〈 无 论 人 台式 机 、 绘 图 板 或 智能 
手机 ) 从 而 创建 路 平台 和 鞠 浏 览 器 的 鳞 容 网 页 ， 提 高 工作 效率 。 

(2) 如 果 要 基于 模板 创建 文档 ， 则 先 在 “ 狐 建 文档 ”对 话 框 中 单 击 “ 模 板 中 的 页 ” 
标签 ， 切 换 到 图 2-25 所 示 的 对 话 框 。 在 该 对 话 框 中 单 击 选择 模板 的 站 点 ， 然 后 再 选择 需要 
的 模板 文件 。 这 时 用 户 可 以 通过 预 筑 区 域 浏览 所 选择 模板 的 样式 ， 确 定 是 否 人 符合 目 己 的 要 
求 。 选 择 需 要 使 用 的 模板 后 ， 单 击 “ 创 建 ” 按 钮 ， 即 可 基于 选 定 的 模板 创建 一 个 新 文件 。 


1 让 sg 的 曙 极 
i lr 二 
| SS 最 和 。 见面 明和 
国 : 2 
[fn 潜入 网 术 和 有 局 
i 
并 | Pm 
[S| NP 
| 四 本 二 
回 当 恒 明 下 季 时 古林 丙 面 0 
| 必 肝 00 ”| | 面 选 右 小 二 ) 到 取 村 这 和 内容 [|_ 站 | | 取 油 下) | 


图 2-25 “新 建文 档 ” 对 话 框 


如 果 要 编辑 一 个 网 页 文件 ， 必 须 先 打 开 该 文件 。Dreamweaver CS6 可 以 打开 多 种 格式 
的 文件 ， 如 htm、html、shtml、asp、jsp、php、js、aspXx、dwt、xml、]lbi、as、css 等 。 打 开 
网 页 文件 可 以 分 为 下 接 打 开 网 页 文件 和 在 框 染 中 打开 网 页 文件 两 种 。 

(1〉 直 接 打 开 文件 。 选 择 “ 文 件 ”/“ 打 开 ” 命 令 ， 弹 出 “打开 ”对 话 框 。 用 户 在 文 
件 名 框 中 选择 需要 打开 的 文件 ， 并 单 击 “打开 ”按钮 ， 即 可 打开 该 文件 。 用 户 也 可 在 对 话 
框 中 双击 所 需 文件 来 打开 。 

如 果 Dreamweaver CS6 还 没有 局 动 , 可 以 右 击 要 打开 的 文件 , 在 弹出 的 菜单 中 执行 “使 
用 Dreamweaver CS6 编 辑 ” 命 令 来 打开 文件 。 

(2) 在 框架 中 打开 文件 。 如 果 已 打开 框 染 集 文件 ， 要 在 框架 集中 某 一 个 框架 打开 文 
件 ， 可 以 先 把 光标 定位 在 需要 打开 文件 的 框架 内 ， 选 择 “ 文 件 ”/“ 在 框 染 中 打开 ”命令 ， 
则 会 打开 “选择 HTML 文 件 ” 对 话 框 。 在 此 方式 下 ， 只 能 打开 以 html 为 扩展 名 的 文件 。 


2.3.2 导入 文件 


在 Dreamweaver CS6 中 ， 可 以 直接 导入 XML 文 件 、 表 格式 数据 、Word 文 档 和 Excel 文 

档 。 
执行 “文件 ”/ “导入 ”命令 下 的 子 命令 ， 然 后 找到 需要 导入 的 文件 单 击 “ 打 开 ” 命 
25 
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2.3.3 你 存 、 关 闭 文件 


在 Dreamweaver CS6 中 ， 保 存 网 页 文件 的 方法 随 保 存 文件 的 目的 不 同 而 不 同 。 

如 果 同 时 打开 了 多 个 网 页 文件 ， 则 执行 “文件 ”/“ 保 存 ” 或 “文件 ”/“ 另 存 为 ” 命 
令 只 保存 当前 编辑 的 页 面 。 

奋 要 保存 打开 的 所 有 页 面 ， 则 须 执 行 “ 文 件 ”/“ 保 存 全 部 ”命令 。 

大 是 第 一 次 保存 该 文件 ， 则 执行 “文件 ”/“ 保 存 ” 命 令 会 弹出 “另存 为 ”对 话 框 。 若 
文件 已 保存 过 ， 则 执行 “文件 ”/“ 保 存 ” 命 令 时 ， 直 接 保 存 文件 。 

如 有 果 希 望 将 一 个 网 页 文件 以 模板 的 形式 保存 ， 切 换 到 要 保存 的 文件 所 在 的 窗口 ， 执 行 
“文件 ”/“ 男 存 为 模板 ”命令 ， 则 会 打开 “另存 模板 ”对 话 框 。 

在 该 对 话 框 的 “站 点 ”下 拉 列 表 框 中 选择 一 个 保存 该 模板 文件 的 站 点 ， 然 后 在 “另存 
和 后 面 的 文本 框 中 输入 文件 的 名 称 ， 最 后 单 击 “ 保 存 ” 按 钮 完成 文件 的 保存 。 


: i Dreamweaver CS6 将 自动 为 站 点 创建 Templates : 


i 文件 夹 ， 并 把 模板 文件 存放 在 Templates 文件 夹 中 。 请 不 要 把 非 模板 文件 存放 到 此 文 
保存 框架 文件 比较 特殊 ， 具 体 方法 将 在 后 面 的 相关 章节 中 详细 介绍 。 


2.3.4 设置 文件 属性 


页 面 标题 、 背 景 图 像 和 颜色 、 文 本 和 链接 颜色 以 及 边 距 是 每 个 Web 文 档 的 基本 属性 。 
一 般 情况 下 ， 新 建 一 个 网 页 文件 后 ， 其 默认 的 页 面 属性 都 不 符合 设计 需要 。 可 以 通过 设置 
文件 的 页 面 属 性 来 自 定义 页 面 外 观 。 其 操作 步骤 如 下 : 

(1) 在 Dreamweaver 中 打开 要 修改 页 面 属性 的 网 页 文件 。 

(2) 选择 “修改 ”/“ 页 面 属 性 ”命令 ， 在 弹出 的 图 2-26 所 示 的 对 话 框 中 对 页 面 的 外 
观 、 链 接 、 标 题 /编码 、 跟 踪 图 像 进行 设置 


页 面 字体 人) 人 i 
大 小 (5) 下 
Ny we = 
背景 项 色 (B); 后 
背景 图 像 I): ; 
重复 下) 


左边 距 1) } 右边 用 ) 
上 边 距 四): :， Tn 


LW 


图 2-26 “页 面 属性 ”对 话 框 
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(3) 在 “外 观 ” 分 类 中 ， 可 以 议和 罩 页 而 字体 天 小 上 硕 色 、 青 景 颜 色 ， 和 网 像 、 背 景 
图 像 的 填充 方式 和 页 边 距 。 页 边 距 是 指 页 面 文 档 主 体 部 分 与 浏览 费 上 、 下 、 左 、 石 边框 的 
距离 。 

如 果 同 时 使 用 背景 图 像 和 背景 闫 色 ， 下 载 图 像 时 会 先 出 现 闫 色 ， 然 后 图 像 窗 新 闫 色 。 
如 条 背景 图 像 包 含 任何 透明 像素 ， 则 背景 赢 色 会 透 过 背景 图 像 显示 出 来 。 

默认 情况 下 ，Dreamweaver 使 用 CSS 指定 页 面 属性 。 如 果 和 希望 使 用 HIML 标签 ， 
则 必须 在 “首选 参数 ”对 话 框 的 “和 常规” 类别 中 取消 对 “使 用 CSS 而 不 是 HTML 标签 ” 
选项 的 选择 。 如 采 选 择 使 用 HTML 指定 页 面 属性 ， 属 性 面板 仍然 显示 “样式 ”弹出 陈 这 
单 ， 不 过 字体 、 大 小 、 需 色 和 对 章 方式 控件 将 只 显示 使 用 HTML 标签 的 属性 设置 ， 应 用 
于 当前 选择 的 CSS 属性 值 将 古 不 可 见 的 ， 且 “大 小 ”弹出 式 采 蛙 也 将 被 禁用 。 

(4) 在 “链接 ”分 类 中 ， 可 以 定义 链接 的 默认 字体 、 衬 体 、 闫 色 以 及 链接 文本 不 同 
状态 下 的 颜色 、 修 饰 样式 。 

(5) 在 “标题 ”分 类 中 ， 用 户 可 以 定义 标题 字体 ， 并 指定 最 多 六 个 级 别 的 标题 标签 
使 用 的 字体 大 小 和 闫 色 。 

(6) 在 “标题 /编码 ”分 类 中 ， 用 户 可 以 指定 页 面 在 浏览 器 窗口 或 编辑 软件 窗口 中 显 
示 的 标题 、 所 用 语言 的 文档 编码 类 型 以 及 指定 要 用 于 该 编码 类 型 的 Unicode 范式 。 

(7) 在 “ 跟 踩 图像 ”分 关中， 用户 可 以 指定 跟踪 网 像 及 网 像 的 透明 虚 。 

跟踪 图 像 是 Dreamweaver 一 个 非常 有 效 的 功能 ， 是 放 在 文档 窗口 背景 中 的 、 使 用 各 种 
绘图 软件 绘制 的 一 个 想象 中 的 网 页 排版 格局 图 ， 可 以 是 JPEG、GIF 或 PNG 图 像 ， 从 而 
可 以 使 用 户 非 常 方 便 地 定位 文学 、 图 像 、 表 格 、 层 等 网 页 元 素 在 页 面 中 的 位 置 。 

跟踪 图 像 仪 在 Dreamweaver 中 可 见 ， 也 就 是 说 ， 使 用 了 跟踪 图 像 的 网 页 在 用 
Dreamweaver 编 辑 时 不 会 再 显示 背景 图 案 , 但 当 使 用 浏 吃 右 浏 览 页 面 时 ， 则 显示 背景 图 案 ， 
而 跟踪 图 像 不 可 见 。 

(8) 设置 完毕 后 ， 单 击 “ 人 确定 ”按钮 关闭 对 话 框 。 所 做 设置 将 应 用 于 当前 文件 。 
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六 或 9SD IJoAesArueaId 项 z 渤 
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加 加“ 司 恬 加 加 必用 回国 大 加 
pe | ee 
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re re 小 总 
上 创建 本 地 站 点 ， 人 同上 - 
-进行 文档 资源 和 链接 等 路 径 的 正 


二 2 让 


3.1 站 点 相关 术语 


在 构建 网 站 之 前 ， 需 要 了 解 几 个 与 站 点 相关 的 基本 概念 。 如 JInternet 服 务 器 、 本 地 计算 
机 、 本 地 站 点 、 远 端 站 点 。 


3.1.1 lnternet 服 务 器 和 本 地 计算 机 


Internet 服 务 器 是 网 络 上 一 种 为 客户 并 计算 机 提供 各 种 Internet 服 务 (包括 WWW、 FTP、 
e-mail 等 ) 的 局 性 能 计算 机 ， 它 在 网 络 操 作 系 统 的 控制 下 ， 将 与 其 相连 的 人 硬盘、 磁 融 、 打 
印 机 、Modem 及 各 种 专用 通讯 设备 提供 给 网 络 上 的 客户 站 点 共享 ， 也 能 为 网 络 用 户 提供 集 
中 计算 、 信 息 发 表 及 数据 管理 等 服务 。 它 的 高 性 能 主要 体现 在 高 速度 的 运算 能 力 、 长 时 间 
的 可 靠 运 行 、 强 大 的 外 部 数据 吞吐 能 力 等 方面 。 

一 般 来 说 ， 用 户 访 问 网 站 其 实 束 是 访问 服务 器 里 的 资料 。 对 于 WWW 浏 贤 服 务 来 说 ， 
Internet 服 务 需 主要 用 于 存储 用 户 所 浏览 的 Web 站 点 和 页 面 。 用 户 在 浏览 网 页 时 ， 不 需要 了 
解 它 的 实际 位 置 ， 只 需要 在 地 址 栏 输入 网 址 ， 按 下 回 车 键 ， 就 可 以 轻松 浏览 网 页 。 

对 于 浏览 网 页 的 用 户 来 说 ， 他 们 所 使 用 的 计算 机 被 称 作 本 地 计算 机 。 本 地 计算 机 也 可 
能 成 为 服务 器 ， 只 不 过 可 能 没有 专业 的 服务 器 好 ， 比 如 访问 量 过 大 可 能 束 会 出 现 次 痪 等 。 

本 地 计算 机 和 Internet 服 务 器 之 间 通 过 各 种 线路 (如 电话 线 、ADSL、ISDN 或 其 他 缆 线 
等 ) 进行 连接 ， 以 实现 相互 的 通信 。 在 连接 线路 中 ， 可 能 会 通过 各 种 各 样 的 中 间 环 节 。 


3.1.2 本 地 站 点 与 远 端 站 点 


在 理解 了 Internet 服 务 占 和 本 地 计算 机 的 概念 之 后 ， 了 解 远 病 站 点 和 本 地 站 点 就 很 容易 
了 。 严 格 地 说 ， 站 点 是 一 种 文档 的 磁盘 组 织 形 式 ， 它 由 文档 和 文档 所 在 的 文件 夹 组 成 。 设 
计 恨 好 的 网 站 通 第 具有 科学 的 结构 ， 利 用 不 同 的 文件 夹 ， 将 不 同 的 网 页 内 容 分 门 别 类 地 保 
存 。 绪 构 恨 好 的 网 站 ， 不 仅 便 于 管理 ， 也 便于 更 新 。 

在 Internet 上 浏览 网 页 ， 束 是 用 浏览 器 打开 存储 于 Internet 服 务 器 上 的 HTML 文 档 及 其 他 
相关 资源 。 基 于 Internet 服 务 噩 的 不 可 知 特性 ,我 们 通 第 将 存储 于 Internet 服 务 器 上 的 站 点 称 
作 远 端 站 点 。 

利用 Dreamweaver CS6 可 以 对 位 于 Internet 服 务 器 上 的 站 点 文档 直接 进行 编辑 和 管理 。 
但 这 在 很 多 时 候 非 党 不便 ， 例 如 网 络 速 上 度 和 网 络 的 不 稳定 性 等 ， 都 会 对 管理 和 编辑 操作 带 
来 影响 。 此 外 , 下 接 对 位 于 Internet 服 务 器 上 的 文档 和 站 点 进行 操作 , 必须 始终 保持 同 Internet 
的 连接 。 

既然 位 于 Internet 服 务 器 上 的 站 点 仍然 是 以 文档 和 文件 夹 作为 基本 要 素 的 磁盘 组 织 形 
式 ， 那 么 ， 能 不 能 首先 在 本 地 计算 机 的 磁盘 上 构建 出 整个 网 站 的 框架 ， 编 辑 相 应 的 文档 ， 
然后 再 将 之 放置 到 Internet 服 务 占 上 呢 ? 答 案 是 可 以 的 ， 这 束 是 本 地 站 点 的 概念 。 

利用 Dreamweaver CS6， 用 户 可 以 在 本 地 计算 机 上 创建 出 站 点 的 框架 ， 从 整体 上 对 站 
点 全 局 进行 把 握 。 站 点 设计 完毕 之 后 ， 再 利用 各 种 上 传 工具 ， 例 如 FTP 程 序 ， 将 本 地 站 操 
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《48 __ Dreomwearer E56 中 立 凰 入 门 忆 提高 实例 杂 弄 
dt 


上 载 到 Internet 服 务 器 上， 形成 远 闹 站 点。 
3.2 ”构建 本 地 站 点 


下 和 面 以 建立 本 地 站 点 café 的 简单 例子 演示 创建 独 站 点 的 具体 步 又 : 
01 局 动 Dreamweaver CS6， 执 行 “ 站 点 ”/“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ” 
对 话 框 ， 如 图 3-1 所 示 。 如 下 还 没有 创建 任何 站 点 ， 则 列表 框 是 空 的 。 


[守信 引 点 | | 局 六 nass tshye 由 虎 | [麻辣 司 点 | [机 通 usnass ctalva 由 襄 | 


| 


图 3-1 “管理 站 点 ”对 话 框 


与 早期 版 本 相 比 ，Dreamweaver CS6 的 “管理 站 点 ”对 话 框 给 人 焕然 一 新 的 感觉 。 在 
该 面板 中 新 增 了 创建 或 导入 Business Catalyst 站 点 功能 ， 利 用 该 功能 ， 可 以 在 
Dreamweaver 中 创建 新 的 Business Catalyst 试用 站 点 。 

02 单 击 “ 新 建站 点 ”按钮 ， 在 弹出 的 下 拉 羔 单 中 选择 “站 点 ”命令 ,或 直接 执行 
“站 点 ”/“ 新 建站 点 ”命令 ， 弹 出 图 3-2 所 示 的 “站 点 设置 ”对 话 框 。 


站 点 设置 对 象 未 命名 站 点 2 


De 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 Dreamweaver 
站 点 通常 包含 两 个 部 分 ; 可 在 其 中 存储 和 处 理 文 件 的 计算 机 上 的 本 地 文件 
夹 ， 以 用 师 守 呈 中 将 条 辣 妆 二 发 下 Web 上 的 服务 器 上 的 远程 文件 来。 


您 可 以 在 此 处 汰 Dreamweayer 站 点 选择 本 地 文件 来 和 名 称 。 
站 点 名 称 ; | 未 前 名 站 点 2 
本 地 站 点 俊 件 夹 ; | D'MYy Documents\ 未 命名 站 点 2 已 


图 3-2 “站 点 设置 ”对 话 框 


0 入 输入 站 点 名 等 cafk 和 本 地 站 点 文件 夹 路 径 ， 然 后 单 击 “ 人 保存” 按钮， 即 可 新 建 一 
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个 请 及。 

利用 以 上 步骤 可 以 将 磁盘 上 现 有 的 文档 组 织 成 一 个 站 点 ， 便 于 以 后 统一 管理 。 例 如 ， 
在 计算 机 上 的 E:\café 文 件 夹 下 有 一 个 网 站 的 网 页 ， 可 以 在 “站 点 设置 ”对 话 框 的 “本 地 站 
点 文件 夹 ” 石 侧 的 文本 框 中 键入 E:\caféf， 从 而 在 本 地 磁盘 上 创建 一 个 名 为 caf€ 的 站 点 。 

从 这 里 也 可 以 看 出 站 点 的 概念 同文 档 不 同 ， 文 档 可 以 是 已 经 存在 的 ， 但 是 站 点 则 是 新 
创建 的 ， 换 句 话 说 ， 站 点 只 是 文档 的 组 织 形式 。 

如 来 需要 对 站 点 进行 更 详尽 的 设置 ， 可 以 按照 以 下 步 又 操作 。 

04. 单 击 “ 站 点 设置 ”对 话 框 左 侧 的 “高 级 设置 ”分 类 项 ， 然 后 在 其 子 沫 单 中 选择 

“本 地 信息 ”， 如 图 3-3 所 示 。 对 话 框 中 各 选项 的 功能 如 下 : 


默认 图 俐 文件 夹 已 
站 点 范围 媒体 查询 文人 [ | 各 


链接 相对 于 ; 中 文档 〇 站 点 根 目 录 


Web URL: 
如 果 没 有 定义 远程 服务 器 , 请 输入 Web URL。 如 果 已 定义 远 各 
服务 器 ，pD 


Dreamweawer 将 使 用 服务 器 设置 中 指定 的 Web URL 。 


口 区 分 大 小 写 的 链接 检查 
Mi 启用 缀 存 


缓存 中 保存 着 站 点 中 的 浆 件 和 资源 信息 。 这 将 加 快 资 源 面板 和 
链接 管理 功能 的 速度 。 


图 3-3 ”本 地 信息 


(1)“ 默 认 图 像 文件 夹 ” 用 于 设置 本 地 站 点 岁 像 文件 的 默认 保存 位 置 。 
42)“ 站 点 范围 你 体 得 询 文件 ” 指定 站 点 内 所 有 包括 浆 体 得 询 链 接 的 页 面 的 显示 议 


首 


站 点 范围 并 体 得 询 文件 郭 当 站 氮 内 所 有 媒体 得 询 的 中 央 存 储 库 。 创 建 此 文件 后 ， 从 站 
点 内 必须 使 用 此 文件 中 的 媒体 得 询 才 能 显示 的 页 面 中 链接 到 此 文件 。 

姬 体 奋 询 是 癌 不 同 设备 提供 不 同样 式 的 一 种 方式 ， 它 为 每 种 类 型 的 用 户 提 供 了 最 佳 的 
体验 ， 使 网 站 不 仅 在 传统 和 更 面 系统 上 看 起 来 不 错 ， 在 各 种 太 寸 的 智能 电话 、 平 板 电脑 和 其 
他 移动 设备 上 看 起 来 也 不 错 。 作 为 CSS3 规 范 的 一 部 分 ， 媒 体 谷 询 扩展 了 media 属 性 的 角色 ， 
允许 设计 人 员 基 于 各 种 不 同 的 设备 属性 《比如 屏幕 宽度 、 方 向 等 ) 来 确定 目标 样式 。 

媒体 查询 文 持 Internet Explorer (IE) 9 及 更 高 版 本 、Firefox 3.5 及 更 高 碑 本 、Safari 3 及 更 
高 版 本 、Opera 7 及 更 高 版 本 以 及 大 部 分 现代 智能 电话 和 其 他 基于 屏 医 的 设备 。 巡 体 奋 询 的 
一 个 人 简单 示例 如 下 所 示 : 

<link href="css/my mediaquery.cSS” rel="stylesheet” type="text/css" media="all and 
(max-width: 400px)" > 

该 示例 的 含义 很 明显 : 仅 将 样式 表 my mediaquery.css 应 用 到 宽度 不 超过 400 像 素 的 设 
备 。 

3)“ 链 接 相 对 于 ”: 用 于 设置 为 链接 创建 的 文档 路 径 的 闫 型 ， 文 档 相 对 路 径 或 根 目 
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2 Dreammeawer gop 中 文 豚 入 门 己 村 高 实例 赤 胆 
录 相 对 路 径 。 
\ 注意 : 
9 更改 站 点 范围 媒体 查询 文件 不 会 影响 链接 到 其 他 或 以 前 站 点 范围 媒体 查 
询 文件 的 文档 


(4)“Web URL”: 用 于 设置 本 站 点 的 地 址 ， 以 便 Dreamweaver CS6 对 文档 中 的 绝对 
地 址 进行 校 验 。 

Web URL 由 域名 和 Web 站 点 主 目录 的 任何 一 个 子 目录 或 虚拟 目录 〈 而 不 是 文件 名 ) 
组 成 。 如 果 Dreamweaver 应 用 程序 与 Web 服务 器 在 同一 系统 上 运行 ， 则 可 以 使 用 
localhost 作 为 域名 的 占 位 符 ， 将 来 申请 域名 之 后 ， 再 用 正确 的 域名 进行 古 换 。 

(5)“ 区 分 大 小 写 的 链接 检查 ”选中 此 项 后 ， 对 站 点 中 的 文件 进行 链接 检查 时 ， 将 
检查 链接 的 大 小 写 与 文件 名 的 大 小 写 是 否 相 匹配 。 此 选项 用 于 文件 名 区 分 大 小 写 的 UNIX 
系统 。 

(6)“ 忆 用 缓存 ”: 创建 本 地 站 点 的 绥 存 ， 以 加 快 站 点 中 链接 更 新 的 速度 ， 同 时 在 站 
点 地 图 模式 中 ,清晰 地 反映 当前 站 点 的 结构 。 


\ 注意 : 


一 Dreamweaver CS6 新 增 了 Web 字体 . 现在 可 以 在 Dreamweaver 中 使 用 有 


创造 性 的 Web 支持 字体 (如 Typekit Web 字体 ) 。 执 行 “ 修 改 ”/“Web 字体 ” 菜 
单 命令 即 可 将 Web 字体 导入 Dreamweaver 站 点 。 如 果 要 在 当前 站 点 中 使 用 Web 字 
体 ， 则 需要 切换 到 “Web 字体 ”人 分类， 指定 Web 字体 文件 的 存储 位 置 。 


如 果 要 创建 动态 网 站 ， 则 还 需要 按 以 下 步骤 指定 远程 服务 器 和 测试 服务 器 。 在 
Dreamweaver CS6 中 ， 用 户 可 以 在 一 个 视图 中 指定 远程 服务 器 和 测试 服务 器 ， 从 而 使 用 户 
可 以 前 所 未 有 的 速度 快速 建立 网 站 ， 分 阶段 或 联网 站 点 甚至 还 可 以 使 用 多 台 服 务 器 。 

053 单 击 “ 服 务 占 ”类 别 ， 在 图 3-4 所 示 的 对 话 框 中 单 击 “添加 新 服务 占 ” 按 钮 补 ， 
添加 一 个 新 服 务 右 ， 如 图 3-5$ 所 示 。 


-ee ew ls 
Imnaornei 腺 务 境 典 痪 G5") 或 wb 管理 月 、 


of wp Hk A , 皇 二 不 此 地 必 ， 问 归于 这 陵 凤 所 凑 
EP tn eet 党 下 ax 9 


图 3-4 “站 反 设 置 ”对 话 框 
06 在 “服务 万 名 称 ” 文 本 框 中 ， 指 定 新 服务 器 的 名 称 。 该 名 称 可 以 是 所 选择 的 任 
何 名 称 。 


07 在 “连接 方法 ”弹出 菜单 中 选择 连接 到 服务 器 的 方式 ， 如 图 3-6 所 示 。 
如 果 选 择 “FTP” 则 要 在 “FTP 地 址 ”文本 框 中 输入 要 将 网 站 文件 上 传 到 其 中 的 FTP 
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服务 器 的 地 址 、 连 接 到 FTP 服务 器 的 骨 户 名 和 密 何 ， 然 后 在 “ 根 目 孙 ” 文本 杠 中 输入 远 
程 服务 器 上 用 于 存储 公开 显示 的 文档 的 目录 (文件 夹 )。 如 果 仍 需要 设置 更 多 选项 ， 可 以 
展开 “更 多 选项 ”部 分 ， 如 图 3-7 所 示 。 


服务 器 名 称 : [myserver | 
连接 方法 ; | FTP 
w FTP 
5FTP 
用 己 名 :| FTp over 55LTL5( 隐 式 加 密 ) 
密码 ,| “| FTP over 55LITL5( 显 式 加 密 ) 
本 地 | 网 络 
根 目录 ; WebDAY 
Web URL; | http: jilocalhost/ a a 


Web URL; | http: /ilocalhost! 
* 更 多 选项 


> 更 多 选项 


FTP 地 址 ; FTP 地 址 : 
用 户 名 ， 
密码 ; 


保存 取消 


图 3-5 “站 点 设置 ”对 话 框 图 3-6 ”选择 连接 到 服务 器 的 方法 


FTP 地 址 是 计算 机 系统 的 完整 Internet 名 称 ， 如 ftp.mindspring.com。 应 输入 完整 的 
地 址 ， 并 且 不 要 附 帝 其 他 任何 文本 ,特别 是 不 要 在 地 址 前 面 加 上 协议 名 。 如 果 不 知 道 FTP 
地 址 ， 或 不 能 确定 应 输入 哪些 内 容 作 为 根 上 目录， 应 与 服务 器 管理 员 联 系 。 


和 注意 : 


一 端口 21 是 接收 FTP 连接 的 默认 端口 。 可 以 通过 编辑 右 侧 的 文本 框 来 更 


改 默认 端口 号 。 保 存 设置 后 ， FTP 地 址 的 结尾 将 附加 上 一 个 冒号 和 新 的 端口 号 ( 例 
如 ， ftp.mindspring.com:29 ) 。 


08 如 果 选 择 连 接 方式 为 “本 地 /网 络 ”， 则 单 击 “ 服 务 喜 文件 夹 ” 右 侧 的 文件 夹 图 
标 按钮 ， 指 定 存储 站 点 文件 的 文件 夹 所 在 的 路 径 。 
093 在 “Web URL” 文 本 框 中 ， 输 入 Web 站 点 的 URL。 
测试 服务 需 的 Web URL 由 域名 和 Web 站 点 主 目录 的 任意 子 目 采 或 虚拟 目录 组 成 。 
Dreamweaver 使 用 Web URL 创 建站 点 根 目录 相对 链接 ， 并 在 使 用 链接 检查 费时 验证 这 些 
链接 。 指 定 了 Web URL，Dreamweaver 才 能 使 用 测试 服务 器 的 服务 来 连接 到 数据 库 ， 并 所 
供与 数据 有 天 的 数据 信息 。 
10 单 击 “保存 ”按钮 关闭 “基本 ”屏幕 。 然 后 在 “服务 器 ”类 别 中 ， 指 定 刚 添加 
或 编辑 的 服务 器 为 近 程 服务 右 、 测 试 服务 器 ， 还 是 同时 为 这 两 种 服务 硕 ， 如 图 3-8 所 示 。 
在 这 里 ， 需 要 提请 谈 者 注意 的 是 , 如 果 本 地 根 文 件 夹 位 于 运行 Web 服务 右 的 系统 中 ， 
则 无 需 指定 远程 文件 夹 。 这 意味 大 该 Web 服务 器 正在 您 的 本 地 计算 机 上 运行 。 
创建 动态 站 点 的 目的 是 开发 动态 忠 ， Dreamweaver 还 震 要 测试 服务 右 的 服务 以 便 在 进 
行 操 作 时 生成 和 显示 动态 内 容 。 测 试 服务 需 可 以 是 本 地 计算 机 、 开 发 服务 器 、 中 间 服 务 咒 
或 生产 服务 器 。 接 下 来 的 步骤 设置 测试 服务 塔 。 
1 人 是 在 “站 点 设置 ”对 话 框 的 “服务 器 ”类 别 中 单 击 “ 添 加 新 服务 器 ”按钮 |[ 土 |， 添 
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DrecIRRERRERTSO 中 立 版 入 门 与 提高 实例 着 


加 一 个 新 服务 器 ;或 选择 一 不 已 有 的 服务 器 ， 然 后 单 击 “ 编 辑 现 有 服务 器 ”按钮 | 过 |. 


服务 器 名 称 ; 
连接 方法 ; 
FP 地 址 :[ | 端 D: 2 
用 Pg:[ | ~ 您 将 在 此 位 置 选择 兴 载 web 上 的 页 面 的 服务 器 。 此 对 话 框 的 设置 来 自 
: Internet 服务 提供 商 (SP) 或 Web 管理 员 。 
密码 [| ID 多 
注意 ; 要 开始 在 Dreamweaver 站 点 上 工作 ， 你 无 需 完成 此 步骤 。 如 果 要 和 连接 到 | Web 并 发 
NE 布 页 面 ， 您 只 需 定义 一 个 远程 服务 器 即 可 。 
根 目录 :[ | | 连接 ” ”| 运程 “测试 | 
Web URL: myserver E:jDreamweaver C56 标 准 ,， 本 地 /网络 [MI DD 
了 更 多 选项 
[Vi 使 用 被 动 式 FTP 
口 使 用 IPw6 车 输 模式 
口 使 用 以 下 位 置 中 定 尺 的 代理 首选 半数 
[V3 使 用 FTP 性 能 忧 化 
口 使 用 其 它 的 FTP 移动 方法 
保存 取消 


图 3-7 ”设置 浏览 文件 的 地 址 图 3-8 ”服务 右 类 型 


1 人 和 5 在 弹出 的 图 3-5$ 所 示 的 对 话 框 中 根据 需要 指定 “基本 ”选项 ， 然 后 单 击 “ 高 级 ” 
按钮 ， 如 图 3-9 所 示 。 


指定 测试 服务 器 时 ， 人 必须 在 “基本 ”屏幕 中 指定 Web URL. 


13 在 测试 服务 器 中 ， 选 择 要 用 于 Web 应 用 程序 的 服务 器 模型 ， 如 图 3-10 所 示 。 


7 远程 服务 器 
[Vi 维护 同步 信息 
口 ] 保存 时 自动 将 文件 上 传 到 服务 器 
一 口 ] 启用 文件 取出 功能 
Mi 打开 化 件 之 前 职 出 
- 远程 服务 器 es. 
[Mi 维护 同步 信息 取出 名 称 ; | | 
咒 保存 时 自动 将 站 件 上 传 到 服务 器 电子 邮件 地 址 ;| 
口 ] 启用 文件 取出 功能 
B 打开 文件 之 前 取出 F 测试 服务 器 
取出 名 称 ; 服务 器 模型 | "| 
5 
电子 邮件 地 址 ; 5P td 
ASp VBScript 
” 铀 试 服务 器 ASP,NET C# 
服务 器 模型 | |v”| A5P,NET YB 
ColdFusion 
I5p 
保存 取消 


PHP My5QL 
图 3-9 ”设置 远程 服务 器 和 测试 服务 器 图 3-10 ”选择 服务 器 模型 


14 单 击 “ 保 存 ” 按 钮 关闭 “高 级 ”屏幕 。 然 后 在 “ 服务 器 ”类 别 中 ， 指 定 刚 才 作 
为 测试 服务 需 诊 加 或 编辑 的 服务 器 。 

15 单 击 对 话 框 中 的 “确定 ”按钮 ， 返回“ 站 点 管理 ”对 话 框 。 这 时 对 话 框 里 列 出 
本 刚刚 创建 的 本 地 站 霹 to 
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一 提示 : “从 Dreamweaver CS6 开始 ，Dreamweaver 将 不 再 安装 ASP.NET、ASP 


JavaScript 或 JSP 服务 器 行为 。 但 Dreamweaver CS6 对 这 些 页 面 仍然 提供 实时 视图 、 
| 代码 颜色 和 代码 提示 支持 ， 且 无 需 在 “站 点 设置 ” 对 话 框 中 选择 ASP.NET、ASP 
i JavaScript 或 JSP。. 


3.3 ”管理 本 地 站 点 和 站 点 文件 


在 Dreamweaver CS6 中 ， 可 以 对 本 地 站 点 进行 多 方面 的 管理 。 利 用 “文件 ”面板 ， 可 
以 对 本 地 站 点 的 文件 和 文件 夹 进行 创建 、 删 除 、 移 动 和 复制 等 操作 。 


3.3.1 管理 站 点 


对 站 点 的 常用 操作 主要 包括 打开 本 地 站 点 、 编 辑 站 点 、 删 除 站 点 以 及 复制 站 点 。 

1. 打开 本 地 站 点 

(1) 执行 “窗口 ”/“ 文 件 ” 命 令 ， 打 开 文 件 管理 面板 ， 如 图 3-11 所 示 。 

(2) 单 击 文件 管理 面板 左上 角 的 下 拉 列 表 ， 从 中 选择 需要 的 站 点 ， 如 图 3-12 所 示 ， 即 
可 打开 相应 的 站 点 。 


由 


局 … 由 


图 3-11 “文件 ”管理 面板 图 3-12 ”选择 站 点 


2， 编 辑 站 点 “在 创建 了 站 点 之 后 ， 如 果 对 站 点 的 某 些 定义 不 满意 ， 还 可 以 对 站 点 属 
性 进行 编辑 。 方 法 如 下 : 

(1) 执行 “站 点 ”/“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 。 

(2) 选择 需要 编辑 的 站 点 ， 单 击 “ 编 辑 ” 按 钮 | 名 |， 弹 出 该 站 点 的 “站 点 设置 ”对 话 


框 。 


(3) 依照 本 章 上 一 节 中 介绍 的 方法 重新 设置 站 点 的 属性 。 

编辑 站 点 时 弹出 的 对 话 框 和 创建 站 点 时 弹出 的 对 话 框 完全 一 样 ， 在 此 不 再 袭 述 。 

3. 删除 站 点 ”如 果 不 再 需要 某 个 本 地 站 点 ， 可 以 将 其 从 站 点 列表 中 删除 ， 删 除 站 点 
步骤 如 下 : 
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“79 DreoWERRERECS6 中 文 版 入门 与 提高 实例 下 有 


(1) 执行 “站 点 ”/“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 。 
(2) 选择 需要 删除 的 站 点 ， 单 击 “ 删 除 ” 按 钮 | 二， 弹出 一 个 对 话 框 ,提示 用 户 本 操 
作 不 能 通过 执行 “编辑 ”/“ 撤 消 ” 命 令 的 办 法 恢复 。 


(3) 单 击 “ 是 ”， 即 可 删除 选中 站 点 。 
| 1 
= 提示 ， 人 > 六 > R= 口 日 人 人、 = 、> ~ > 下 、 已 ' 
删除 站 点 实际 上 只 是 删除 了 Dreamweaver 同 该 本 地 站 点 之 间 的 关系 。 但 是 


实际 的 本 地 站 点 内 容 ， 包 括 文件 夹 和 文档 等 ,仍然 保 存在 磁盘 相应 的 位 置 上 。 用 户 可 | 
以 重新 创建 指向 该 位 置 的 新 站 点 。 | 


建 ， 既 浪费 时 间 和 精力 ， 而 且 最 终 的 页 面 布局 也 可 能 不 一 致 。 利 用 站 点 的 复制 特性 则 可 以 
轻易 解决 这 个 问题 。 首 先 从 一 个 基准 站 点 上 复制 出 多 个 站 点 ， 然 后 再 根据 需要 分 别 对 各 个 
站 点 进行 修改 ， 能 够 极 大 地 提高 工作 效率 。 复 制 站 点 的 步 又 如 下 : 

(1) 执行 “站 点 ”/“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 。 

(2) 选择 需要 复制 的 站 点 ， 单 击 “复制 ”按钮 图 |， 即 可 将 该 站 点 复制 。 

新 复制 出 的 站 点 名 称 会 出 现在 “管理 站 点 ”对 话 框 的 站 点 列表 中 。 站 点 名 称 采 用 原 站 
点 名 称 后 添加 “复制 ”字样 的 形式 。 

若 需要 更 改 默认 的 站 点 名 字 ， 可 以 选中 新 复制 出 的 站 点 ， 然 后 单 击 “ 编 辑 ” 按钮 | 邓 肪 
辑 站 点 名 称 等 属性 。 


3.3.2 使 用 文件 面板 


在 Dreamweaver 中 ， 站 点 和 站 点 文件 的 管理 主要 是 通过 使 用 “文件 ”面板 来 实现 的 。 


借助 “文件 ”面板 还 可 以 访问 站 点 、 服 务 器 和 本 地 了 驱动器， 显示 或 传输 文件 。 
在 “文件 ”面板 中 查看 站 点 、 文 件 或 文件 夹 时 ， 可 以 更 改 查 看 区 域 的 大 小 ， 还 可 以 展 
开 或 折合 “文件 ”面板 。 当 折合 “文件 ”面板 时 ， 它 以 文件 列表 的 形式 显示 本 地 站 点 、 远 
程 站 点 、 测 试 服务 器 或 SVN 库 的 内 容 。 在 展开 时 ， 它 会 显示 本 地 站 点 和 远程 站 点 、 测 试 
服务 器 或 SVN 库 中 的 其 中 一 个 。 展 开 的 “文件 ”面板 的 选项 如 图 3-13 所 示 。 
遍 图 列表 上 传 文件 ”展开 * 折 得 让 点 
外 | 说 清太 
BY ett || 斌 要 最 和 Fw || 马 | 各 | 太夫 如 和 外 浅 | 加 
oe 获取 文件 | 与 服务 器 同步 
站 所 列表 和 连接 / 断 开 上 展 务 古 。。 耶 出 立 件 


图 3-13 ”展开 的 “文件 ”面板 选项 
1. 站 点 列表 名 we ”~ 在 该 列表 中 可 以 选择 Dreamweaver 站 点 并 显示 该 
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站 点 中 的 文件 ， 还 可 以 访问 本 地 磁盘 上 的 全 部 文件 ， 类 似 于 Windows 的 资源 管理 器 。 

2. 连接 / 断 开 远 程 服务 回 | 总 | 用 于 连接 到 远程 站 点 或 断 开 与 远程 站 点 的 连接 。 默认 情 
况 下 , 如 果 Dreamweaver 已 空闲 30 分 钟 以 上 , 则 将 断 开 与 远程 站 点 的 连接 ( 仪 限 FTP) 。 
若 要 更 改 时 间 限 制 ， 可 以 在 “首选 参数 ”/“ 站 点 ”面板 中 进行 设置 。 

3. 刷新 如 ”用 于 刷新 本 地 和 远程 目录 列表 。 

4. 视图 列表 | 本 志 视 图 vw 在 该 下 拉 列 表 中 可 以 使 站 点 视图 在 本 地 视图 、 远 程 服务 器 视 
图 、 测 试 服务 器 视图 和 存储 库 视图 之 间 进 行 切 换 。 在 “首选 参数 ”/“ 站 点 ”面板 中 可 以 设 
置 本 地 文件 和 远 端 文件 哪个 视图 在 左 ， 哪 个 视图 在 右 。 

5， 获取 文件 .是 ”用 于 将 选 定 文件 从 远程 站 点 复制 到 本 地 站 点 。 如 果 该 文件 有 本 地 副 
本 ， 则 将 其 覆盖 。 

如 果 在 “站 点 定义 ” 对 话 框 中 已 选中 “启用 文件 取出 功能 ” 选项， 则 本 地 副本 为 只 读 ， 
文件 仍 将 留 在 远程 站 点 上 ， 可 供 其 他 小 组 成 员 取 出 。 如 果 已 禁用 “启用 文件 取出 功能 ”， 
则 文件 副本 将 具有 读 写 权限 。 

6. 上 传 文件 全 将 选 定 的 文件 从 本 地 站 点 复制 到 远程 站 点 。 

如 果 所 上 传 的 文件 在 远程 站 点 上 尚 不 存在 , 并 且 已 在 “站 点 设置 ?对话 框 中 选中 了 “局 
用 文件 取出 功能 ”选项 ， 则 会 以 “取出 ”状态 将 该 文件 添加 到 远程 站 点 。 如 果 不 希望 以 取 
出 状态 添加 文件 ， 则 单 击 “ 存 回 文件 ”按钮 。 

7. 取出 文件 上 用 于 将 文件 的 副本 从 远程 服务 器 传输 到 本 地 站 点 ， 并 且 在 服务 器 上 
将 该 文件 标记 为 取出 。 如 果 该 文件 有 本 地 副本 ， 则 将 其 覆盖 。 

如 果 在 “站 点 设置 ”对 话 框 中 没有 选中 “启用 文件 取出 功能 ”选项 ， 则 此 选项 不 可 用 。 

8， 存 回 文件 (重用 于 将 本 地 文件 的 副本 传输 到 远程 服务 器 ， 并 且 使 该 文件 可 供 他 人 
编辑 。 执 行 该 操作 之 后 ， 本 地 文件 被 标记 为 只 读 。 

如 果 在 “站 点 设置 ”对 话 框 中 禁用 了 “启用 文件 取出 功能 ”选项 ， 则 此 选项 不 可 用 。 

9. 与 服务 器 同步 辟 ”同步 本 地 和 远程 文件 夹 之 间 的 文件 。 

10， 展 开 / 折 县 站 点 吕 ”展开 或 折 和 县 按钮 ， 以 显示 或 隐藏 本 地 和 远 端 站 点 。 


3.3.3 ”操作 站 后 文件 或 文件 夹 


无 论 是 创建 空白 的 文件 ， 还 是 利用 已 有 的 文件 构建 站 点 ， 都 可 能 会 需要 对 站 点 中 的 文 
件 夹 或 文件 进行 操作 。 下 面 简 要 介绍 利用 “文件 ”面板 对 本 地 站 点 的 文件 夹 和 文件 进行 创 
建 、 删 除 、 移 动 和 复制 等 操作 。 

1， 痢 建 /删除 站 点 文件 在 本 地 站 点 中 痢 建 文件 或 文件 夹 的 操作 步骤 如 下 : 

(1) 执行 “窗口 ”/“ 文 件 ” 命 令 ， 打 开 文 件 管 理 和 面板。 

(2) 告 击 “文件 ”面板 左上 和 角 的 下 拉 列 表 选 择 宕 要 狐 建 文件 或 文件 夹 的 站 后 。 

(3) 单 击 “ 文 件 ” 官 理 面 板 右 上 角 的 选项 按钮 ， 选 择 “ 文 件 ”/“ 狐 建文 件 ” 或 “新 
建文 件 来” 命令 新 建 一 个 文件 或 文件 夹 。 

如 果 要 从 本 地 文件 列表 面板 中 删除 文件 ， 可 以 按照 如 下 方法 进行 操作 : 

(1) 执行 “窗口 ”/“ 文 件 ” 命 令 ， 打 开 文 件 管 理 面 板 。 

(2) 单 击 “ 文 件 ” 和 面板 左上 角 的 下 拉 列 表 选 择 文 件 所 在 的 站 扣 。 
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(3) 选中 要 删除 的 文件 或 文件 类 。 

(4) 按 Delete 键 ， 系 统 出 现 一 个 “提示 ”对 话 框 ,询问 用 户 古 人 盏 确定 要 删除 文件 或 文 
件 夹 。 

(5) 单 击 “是 ”后 ， 即 可 将 文件 或 文件 夹 从 本 地 站 扣 中 删除 。 


一 提示 :二 删除 站 点 的 操作 不 同 ， 这 种 对 文件 或 文件 夹 的 删除 操作 ， 会 从 磁盘 上 真 
正 删 除 相应 的 文件 或 文件 来。 


2. 重 命 名 站 点 文件 。 
(1) 执行 “窗口 ”/“ 文 件 ” 命 令 ， 打 开 文 件 管理 面板 。 
(2) 单 击 “文件 ”面板 左上 角 的 下 拉 列 表 选 择 需 要 重 命 名 的 文件 或 文件 夹 所 在 的 站 


wo 


(3) 在 文件 列表 中 选中 需要 重 命 名 的 文件 或 文件 夹 ， 然 后 单 击 文件 或 文件 夹 的 名 称 ， 
使 其 名 称 区 域 处 于 可 编辑 状态 。 
(4) 输入 文件 或 文件 夹 的 新 名 称 ， 然 后 日 击 面 板 空 日 区 域 ， 或 授 下 Enter 键 ， 即 可 重 
命名 文件 或 文件 来。 
3. 编辑 站 点 文件 。 
(1) 执行 “窗口 ”/“ 文 件 ” 命 令 ， 打开 “文件 ”管理 面板。 
(2) 在 “文件 ”管理 面板 左 侧 的 下 拉 列 表 中 选择 需要 编辑 的 文件 所 在 的 站 点 。 
(3) 双击 需要 编辑 的 文件 图 标 ， 即 可 在 Dreamweaver CS6 的 文档 窗口 中 打开 此 文件 ， 
对 文件 进行 编辑 。 
(4) 文件 编辑 完毕 保存 后 ， 即 可 对 本 地 站 点 中 的 文件 进行 更 新 。 
一 般 来 说 ， 可 以 首先 构建 整个 站 点 ， 同 时 在 各 个 文件 夹 中 创建 好 需要 编辑 的 文件 ， 然 
后 在 文档 窗口 中 分 别 对 这 些 文件 进行 编辑 ， 最 终 构 建 完整 的 网 站 内 容 。 
4. 移动 /复制 文件 和 文件 夹 。 
(1) 执行 “窗口 ”/“ 文 件 ” 命 令 ， 打开 “文件 ”管理 面板。 
(2) 在 “文件 ”管理 面板 左 侧 的 下 拉 列 表 中 选择 需要 移动 或 复制 的 文件 所 在 的 站 点 。 
(3) 如 果 要 进行 移动 操作 ， 选 择 “ 编 辑 ”/“ 可 切 ” 玉 日 命令 ; 如 果 要 进行 复制 操作 ， 
则 执行 “编辑 ”/“ 复 制 ” 荣 单 命令 。 
(4) 选中 日 的 文件 夹 ， 打 开 “ 编 辑 ”/“ 烙 贴 ” 命 令 ， 即 可 将 文件 或 文件 夹 移动 或 复 
制 到 相应 的 文件 夹 中 。 
此 外 ， 使 用 鼠标 拖 动 也 可 以 实现 文件 或 文件 夹 的 移动 操作 。 方 法 如 下 : 
(1) 在 “文件 ”面板 的 本 地 站 点 文件 列表 中 选中 要 移动 的 文件 或 文件 夹 。 
(2) 按 下 上 鼠标 左 键 拖 动 选中 的 文件 或 文件 来， 然后 移动 到 目标 文件 夹 上 ， 如 图 3-14 
所 示 ， 释 放 鼠 标 ， 即 可 将 选中 的 文件 或 文件 夹 移 动 到 目标 文件 夹 中 。 
移动 文件 后 ， 由 于 文件 的 位 置 发 生 了 变化 ， 其 中 的 链接 信息 ， 特 别 是 相对 链接 也 应 该 
相应 发 生变 化 。Dreamweaver CS6 会 打开 如 图 3-15 所 示 的 对 话 框 ， 提 示 用 户 是 否 要 更 新 被 
移动 文件 中 的 链接 信息 。 
单 击 “ 更 新 文件 汶 对 话 框 中 的 “更 新 ”按钮 , 名， 即 可 更 新 文件 中 的 链接 信息 。 
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更 新 以 下 文件 的 链接 吗 ? 更 新 上 
rimages/localstart. asp 
不 更 新 器) 


仿 “1 个 本 地 项 目 被 生 中 , 总 [ 百 过 ] 


图 3-14 ”移动 文件 /文件 夹 图 3-15 更 新 文件 链接 


5. 刷新 本 地 站 点 文件 列表 ”如果 在 Dreamweaver CS6 之 外 对 站 点 中 的 文件 夹 或 文件 进 
行 了 修改 ， 则 需要 对 本 地 站 点 文件 列表 进行 刷新 ， 才 可 以 看 到 修改 后 的 结果 。 刷 新 本 地 站 
点 文件 列表 的 一 般 步 又 如 下 : 

(1) 执行 “窗口 ”/“ 文 件 ” 命 令 ， 打 开 文 件 管理 面板。 
(2) 单 击 “ 文 件 ” 面 板 左 侧 的 下 拉 列 表 选 择 需 要 刷新 文件 列表 的 站 点 。 
(3) 单 击 “文件 ” 面板 上 的 “刷新 ”按钮 总;， 即 可 对 本 地 站 点 的 文件 列表 进行 刷新 。 


3.3.4 存储 库 视 图 


目 Dreamweaver CS4 开 始 ， 在 “文件 ”面板 中 己 不 见 “ 地 图 视图 ”的 踪影 了 ， 取 而 代 
之 的 是 增加 了 版 本 控制 功能 的 存储 库 视 图 。 

Dreamweaver CS6 集 成 了 一 个 版 本 控制 软件 Subversion， 可 以 提供 更 健全 的 文件 版 本 控 
制 、 回 深 等 取出 文件 、 存 回 文件 的 操作 。Dreamweaver 虽然 不 是 一 个 完整 的 SVN 客户 端 ， 
却 使 用 户 无 需 任何 第 三 方 工 其 或 命令 行 界面 , 束 可 获取 文件 的 最 新 版 本 , 更 改 或 提交 文件 。 

下 面 徐 要 介绍 一 下 使 用 存储 库 视 图 时 第 用 的 一 些 操作 。 

1. 建立 SVN 连接 Subversion 是 一 种 版 本 控制 系统 ， 它 使 用 户 组 成 员 能 够 协作 编 
辑 和 管理 远程 Web 服务 器 上 的 文件 。 由 于 Dreamweaver CS6 只 是 集成 了 Subversion 客 户 
端 ， 因 此 在 进行 存储 库 视 图 操作 之 前 ， 必 须 建 立 与 SVN 服务 右 的 连接 。 


J 注意 : 

2 Dreamweaver CS6 使 用 Subversion 1.6.9 客 尸 端 库 。 更 高 版 本 的 
Subversion 客户 端 库 不 向 后 碌 容 。 如 果 读 者 更 新 第 三 方 客户 端 应 用 程序 (如 Tortoise 
SVN ) 以 使 用 更 高 版 本 的 Subversion， 则 Dreamweaver 将 无 法 再 与 Subversion 进行 
通信 。 

SVN 服务 占 是 一 个 文件 存储 库 ， 可 供 授权 的 用 户 组 成 员 获 取 和 提交 文件 ， 它 与 
Dreamweaver 中 通常 使 用 的 远程 服务 嚣 不同。 使 用 SVN 时， 远程 服务 器 仍 是 网 页 的 “ 实 
时 ”服务 器 ; SVN 服务 器 用 于 承载 存储 库 ， 存 储 希 望 进行 版 本 控制 的 文件 。— 典 型 的 工作 
流程 是 : 在 SVN 服务 器 之 间 来 回 获 取 和 提交 文件 ， 然 后 通过 Dreamweaver 发 布 到 远程 
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服务 器 。 远 程 服务 器 的 设置 完全 独立 于 SVN 的 设置 

与 SVN 服务 器 的 连接 是 在 “站 点 设置 ”对 话 框 的 “版 本 控制 ”类 别 中 建立 的 。 操 作 
步骤 如 下 : 

(1) 在 “管理 站 点 ” 对 话 框 中 选中 需要 设置 存储 库 的 站 点 ， 然 后 单 击 “ 编 辑 ” 按钮 加 | 
打开 对 应 的 “站 点 设置 ”对 话 框 。 

(2) 在 “站 点 设置 ”对 话 框 中 单 击 “ 版 本 控制 ”类 别 。 

(3) 在 对 话 杠 的“ 访问” 下拉 末日 中 选择 “Subversion”， 显 示 图 3-16 所 示 的 对 话 框 。 


访问 ， 
服务 器 地 址 :| | 
存 铺 库 路 径 ， 


服务 器 端口 ; | 80 


一 一 


图 3-16 ”设置 版 本 控制 选项 


在 开始 此 设置 之 前 , 必须 获得 对 SVN 服务 器 和 “SVN 存储 库 的 访问 权限 。 有 关 SVN 
的 详细 信息 ， 请 访问 Subversion 网 站 ， 网 址 : http://subversion .tigris.ore/。 

(4) 在 “协议 ”下 拉 列 表 中 选择 协议 。 可 选 协议 包括 HTTP、HTTPS、SVN 和 
SVN+SSH.。 

(5) 在 “服务 器 地 址 ”文本 框 中 输入 SVN 服务 器 的 地 址 。 通 常 形式 为 : 服务 器 名 
称 . 域 .com。 

(6) 在 “存储 库 路 径 ” 文 本 框 中 键入 SVN 服务 器 上 存储 库 的 路 任 。 其 形式 通常 类 
似 于 : /svn/your_root_directory，SVN 存储 库 根 文件 夹 的 命名 由 服务 器 管理 员 人 确定 。 


y 注意 : 
2 使 用 SVN+SSH 协议 要 求 具 备 特殊 配置 。 有 关 详 细 信 息 ， 请 访问 


www.adobe.com/go/learn_dw_svn_ssh_cn. 


(7) 如 果 硕 望 使 用 的 服务 器 端口 不 同 于 默认 服务 天 端口 ， 则 在 “服务 需 端 口 ” 区 域 
选择 “ 非 玖 认 值 ”， 并 在 文本 框 中 输入 冰 口 号 ， 人 否则 保留 款 认 设置 。 

(8) 在 “用 户 名 ”和 “密码 ”文本 框 中 分 别 和 输入 SVN 服务 器 的 用 户 名 和 徐 码 。 

(9) 设置 完毕 之 后 ， 单 击 “ 训 试 ” 按 钮 测试 连接 。 然 后 单 击 “ 确 定 ” 按 钮 关闭 对 话 


框 。 
与 SVN 服 务 絮 建立 连接 后 ， 即 可 在 “文件 ”和 面板 中 人 查看 SVN 存储 库 。 
2. 获取 最 狐 版 本 的 文件 ”从 SVN 存储 库 中 获取 文件 的 最 新 版 本 时 , Dreamweaver 会 
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将 该 文件 的 内 容 和 其 相应 的 本 地 副本 的 肉 容 进 行 合并 。 也 就 是 说 , 如 果 您 二 次 提交 文件 后 ， 
有 其 他 用 户 更 新 了 该 文件 ， 这 些 更 新 将 合并 到 您 计算 机 上 的 本 地 版 本 文件 中 。 如 果 本 地 便 
内 上 不 存在 此 文件 ，Dreamweaver 会 径直 获取 该 文件 。 


\ 注意 : 

Cy 首次 从 存储 库 中 获取 文件 时 ， 应 使 用 本 地 空 目 录 ， 或 使 用 所 含 文件 与 存储 
库 中 文件 不 同名 的 本 地 目录 。 如 果 本 地 驱动 器 包含 的 文件 与 远程 存储 库 中 的 文件 同 
名 ，Dreamweaver 不 会 在 第 一 次 尝试 时 ， 便 将 存储 库 文 件 装 入 本 地 驱动 器 。 


获取 最 新 版 本 文件 的 具体 步骤 如 下 : 

(1) 建立 与 SVN 服 务 器 的 连接 。 

(2) 在 “文件 ”面板 的 视图 下 拉 列 表 中 选择 “本 地 视图 ”。 

(3) 在 文件 列表 中 右键 单 击 所 需 文件 或 文件 来， 然后 在 弹出 的 快捷 菜单 中 选择 “版 
本 控制 ”/“ 获 取 最 新 版 本 ”命令 。 

为 获取 最 新 版 本 ， 还 可 以 右键 单 击 文件 ， 然 后 在 上 下 文 菜单 中 选择 “取出 ”命令 ， 或 
者 选择 文件 并 单 击 “ 文 件 ”面板 上 的 “取出 ”按钮 此 。 由 于 SVN 不 支持 取出 工作 流程 ， 
所 以 此 动作 并 不 是 传统 意义 上 的 实际 取出 文件 。 

3. 提交 文件 ”对 网 站 文件 进行 修改 之 后 ， 可 将 其 提交 到 SVN， 步 又 如 下 : 

(1) 与 SVN 服务 器 建立 连接 。 

(2) 在 “文件 ”面板 的 “视图 ”列表 中 选择 “存储 库 视图 ”。 

(3) 在 文件 列表 中 右键 单 击 要 提交 的 文件 ， 然 后 在 弹出 的 上 下 文清 单 中 选择 “ 存 回 ” 
命令 ,或 单 击 “ 文 件 ” 面 板 上 的 “ 存 回 ”按钮 | 钨 |。 

也 可 以 在 “本 地 视图 ”中 右键 单 击 要 提交 的 文件 , 然后 从 弹出 的 上 下 文 荣 单 中 选择 “ 存 


oe 
— 提示 :让 “文件 ”面板 的 文件 列表 中 ,文件 上 的 绿色 选中 标记 表示 此 文件 有 更 改 ， 


| 但 尚未 提交 到 存储 库 。 
4. 更 新 文件 或 文件 夹 的 SVN 状 态 获取 或 提交 文件 之 后 ， 读 者 可 以 更 新 单个 文件 或 
文件 夹 的 SVN 状态 。 此 更 新 操作 不 会 刷新 整个 显示 。 操 作 步 骤 如 下 : 
(1) 确保 已 成 功 建立 SVN 连接 。 
(2) 在 “文件 ”面板 的 “视图 ”下 拉 列 表 中 选择 “存储 库 视 图 ”或 “本 地 视图 ”。 
(3) 在 显示 的 文件 列表 中 右键 单 击 存储 库 或 本 地 文件 中 的 任 一 文件 夹 或 文件 ， 然 后 
从 弹出 的 上 下 文采 日 中 选择 “更 新 状态 ”， 即 可 更 新 存储 库 或 本 地 文件 、 文 件 夹 的 SVN 状 


太 


/DA O 


5. 锁定 和 解锁 文件 ”由 于 存储 库 中 的 文件 可 能 会 在 同一 时 间 被 一 个 或 多 个 小 组 成 员 
访问 或 修改 ， 为 避免 您 修改 文件 时 ， 其 他 小 组 成 员 访问 该 文件 ， 可 以 锁定 文件 。 通 过 锁定 
SVN 存储 库 中 的 文件 ， 可 以 让 其 他 用 户 知 道 有 用 户 正 在 处 理 该 文件 。 此 时 ， 其 他 用 户 仍 
可 在 本 地 编辑 文件 ， 但 必须 等 到 您 解锁 该 文件 后 ， 才 可 提交 该 文件 二 在 仔 储 库 中 锁定 文件 
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时 ,该 文件 上 将 显示 一 个 开锁 图 标 ， 而 其 他 用 户 看 到 的 是 完全 锁定 的 网 标 。 

锁定 和 解锁 文件 的 操作 步骤 如 下 : 

(1) 确保 已 与 SYN 服务 器 成 功 建立 连接 。 

(2) 在 “文件 ”和 面板 的 “视图 ”下 拉 列 表 中 选择 “存储 库 视 图 ”或 “本 地 视图 ”。 

(3) 在 显示 的 文件 列表 中 右键 单 击 存 储 库 或 本 地 文件 中 所 需 的 文件 ， 然 后 从 弹出 的 
上 下 文 业 单 中 选择 “锁定 ”或 “解锁 ”命令 。 

6. 问 存 储 库 添加 新 文件 ”如果 希望 将 一 个 新 文 件 添加 a 到 存储 库 ， 可 以 执行 以 下 操作 : 

(1) 确保 已 成 功 建立 SVN 连接 。 

(2) 在 “文件 ”面板 的 文件 列表 中 选择 要 添加 到 存储 库 中 的 文件 ， 然 后 单 击 右键 ， 
从 强 出 的 快捷 玉 单 中 选择 “ 存 回 ”命令 。 

(3) 确保 要 提交 的 文件 已 位 于 “提交 ”对 话 框 中 ， 然 后 单 击 “ 确 定 ” 按 钮 。 


本 提示: 

7. 解析 冲突 的 文件 ”如 果 您 的 文件 与 服务 器 上 其 他 文件 冲突 ， 可 以 先 编辑 您 的 文件 ， 
然后 将 其 标记 为 已 解析 。 例如 ， 如 果 您 尝试 存 回 的 文件 与 其 他 用 户 的 更 改 有 冲突 ,， SVN 将 
不 允许 您 提交 文件 。 此 时 , 您 可 以 从 存储 库 中 获取 该 文件 的 最 新 版 本 , 手动 更 改 工 作 副 本 ， 
然后 将 您 的 文件 标记 为 已 解析 ， 这 样 就 可 以 提交 了 。 

解析 冲突 的 文件 的 具体 操作 步骤 如 下 : 

(1) 与 SVN 服 务 器 建立 连接 。 

(2) 在 “文件 ”面板 的 “视图 ”下 拉 列 表 中 选择 “本 地 视图 ”。 

(3) 在 显示 的 文件 列表 中 右键 单 击 要 解析 的 文件 ， 然 后 从 弹出 的 上 下 文 菜单 中 选择 
“版 本 控制 ”/“ 标 记 为 已 解析 ”命令 。 


3.4 测试 站 反 


在 将 站 点 上 传 到 服务 右 供 广大 用 户 浏览 之 前 ， 建 议 先 在 本 地 对 网 站 进行 测试 ， 以 便 尽 
早 排 伍 网 站 建设 中 可 能 存在 的 问题 。 例 如 ， 应 该 确保 页 面 在 目标 浏览 器 中 如 预期 的 那样 显 
示 和 工作 ， 没 有 断 开 的 链接 ， 页 面 下 载 时间 合 理 等 。 


3.4.1 管理 网 页 链接 


在 建设 网 站 的 过 程 中 ， 如 果 网 站 的 页 面 很 多 ， 则 链接 出 错 的 可 能 性 会 很 大 。 同 时 ， 由 
于 页 面 的 重新 设计 或 组 织 ， 所 链接 的 页 和 面 很 可 能 已 被 移动 或 删 际 。 如 果 人 力 检 查 网 页 的 链 
接 是 人 否 正 钊 ， 无 疑 是 一 件 很 麻烦 的 事 ， 而 且 可 能 会 遗漏 一 些 隐蔽 的 链接 。 

有 没有 目 动 检 奏 链 接 钳 误 的 方法 呢 ? Dreamweaver CS6 提 供 了 一 个 很 好 的 链接 检 香 
人 器 ， 可 以 帮助 用 户 检 查 网 页 链接 ， 不 但 速度 快 而 且 准 确 。 在 发 布 网 站 之 前 先 使 用 
Dreamweaver CS6 的 链接 检查 器 对 网 站 文件 进行 检查 ， 可 以 检查 单个 页 而 、 一 个 文件 来、 
甚至 整个 站 点 ， 技 出 断 开 的 链接 、 错 误 的 代码 和 未 使 用 的 孤立 文件 等 ， 以 便 进 行 纠 正和 处 
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理 - 

1. 检查 断 开 的 链接 ”选择 “文件 ”/ “检查 页 ”/“ 链 接 ” 命 令 ， 可 以 检查 当前 页 面 的 
链接 。 

选择 “站 点 ”/“ 检 和 奏 站 点 范围 的 链接 ” 玉 单 命令 ，Dreamweaver 将 目 动 检测 当前 站 点 
中 的 所 有 链接 。 检 和 奉 完 毕 ，Dreamweaver 会 在 “结果 ”面板 的 “链接 检查 堪 ” 页 面 显示 检 
得 结果 ， 如 图 3-17 所 示 。 


如 果 发 现 了 错误 的 链接 ，Dreamweaver 会 在 “链接 检查 器 ”页 面 的 文件 窗 格 中 列 出 链 
接 错 误 所 在 的 页 面 。 双 击 检 测 到 的 一 个 结果 ， 会 目 动 打开 相应 的 页 面 ， 并 直接 定位 到 错误 
的 链接 处 ， 修 改 链接 错误 既 快 又 方便 。 


[二 | 要 汉 本 胡 | 几 于 蜗 强 莱 大 性 | 链接 检查 器 站 点 报 洁 和 FIFE 记录 了 服 劳 器 调 斌 三 
显示 (5); | 断 掉 的 链接 | ~ | (链接 文件 在 本 地 磁盘 没有 找到 ) 


,Hlocalstart,.asp jishelpjcommonycolegal,htm 

EB jg jiblogjindex,html !Templates!index, dwt 
,jblogimessage,html 
,jblogiphoto,html 


®, jiblogishop,asp 


!Templateslindex, diwt 
!Templateslindex, dwt 


shop,aspx?p_ds_currentPage=0 


轩 ，jblogjwrite,html 123 


总 共 863 个 ， 


图 3-17 链接 检查 结果 


在 “链接 检查 器 ”页 面 ， 用 户 还 可 以 设置 链接 检查 的 范围 ， 并 将 检查 结 采 保存 。 单 击 
对 话 框 左 侧 的 绿色 三 角形 按钮 如， 可 以 选择 检测 范围 ， 如 图 3-18 所 示 。 

若 要 保存 检测 结果 ， 可 以 单 击 对 话 框 左 侧 的 保存 按钮 册 

2. 检测 无 用 文件 ”利用 Dreamweaver CS6 的 链接 检查 功能 ， 用 户 还 可 以 检查 站 点 中 无 
用 的 文件 并 删 际 。 检 测 无 用 文件 的 步 又 如 下 : 

(1) 执行 “站 点 ”/“ 检 得 站 点 苑 围 的 链接 ” 沫 单 命令 。 

(2) 在 “显示 ”后 面 的 下 拉 列 表 杠 中 选择 “孤立 文件 ”选项 。 


搜索 | 套 考 | 验证 | 浏览 器 莱 容 性 | 链接 检查 器 | 站 点 报告 
显示 (5); | 断 掉 的 链接 |v | (链接 交 件 在 本 地 磁盘 没有 找到 ) 


liishelpicommonjcolegal.htm 
!Templates!index, dwt 
!Templates/!index, dwt 
!Templates!index, dwt 


shop,aspx?p_ds_currentPage=0 
®, jblogiiwrite, html 123 


检查 整个 当 前 本 地 让 点 ;的 链接 (E) 
检查 站 点 中 所 选 净 件 的 链接 红 ) 


®, iblogiphoto,html 


®, jblogishop,asp 


图 3-18 ”设置 检测 范围 


所 有 站 丘 中 无 用 的 文件 会 列 在 “链接 检 得 器 ”页 面 的 文件 窗 格 中 ， ls 19 所 不 。 


,jblogibin/DreamweaverCtrls, dll 在 这 里 选择 “孤立 的 交 件 ” 
®, jblog/datalproduct,.mdb 


®, jblogiFollow_your_dream,wma 
®, jbloglimages/09,gif 
®, jbloglimages/1115.,gif 


®, jbloglimages!113,gif 


图 3-19 ”孤立 文件 检查 结 


将 它们 全 部 选中 ， 按 Delete 键 即 可 删除 。 
3. 显示 外 部 链接 ”利用 Dreamweaver CS6 的 链接 检查 器 ， 还 可 以 查看 当前 站 点 中 包含 
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了 哪些 外 部 链接 ， 但 不 会 检 伍 这 些 链接 侠 合 正确 。 


在 “链接 检查 需 ” 页 血 的 “显示 下拉 列 表 中 选择 “外 部 链接 ”选项 ， 则 对 话 框 的 
窗 格 中 将 显示 当前 网 站 中 使 用 的 所 有 外 部 链接 及 相应 的 文件 ， 如 图 3- A 


搜索 | 参考 | 验证 | 浏览 器 兼容 性 | 链接 检查 器 | 站 点 报告 | FTF 记 录 | 服务 器 调试 

显示 (5): (链接 到 站 点 外 的 页 面 , 不 能 检查 ) 
芭 | 文件 全 | 外 部 链接 

®, jlocalstart,asp javascript'activatel <%=iYer% >») 
园 | Hlocalstart,asp 在 这 里 选择 “外 部 链接 javascript:loadHelpFronti; 

®, /blogjindex,.html http: wy, uy123,com 

®, iblogjindex.html mailto:vivi@123,com 

®, /blogimessage,html 


http: fw, uy123,com 
®, /blogimessage.html mailto: vivi@123,com 


总 共 863 个 ，161 个 HTML ，371 个 孤立 交 件 。 总 共 1325 个 链接 : 1065 个 正确 ，62 个 断 掉 ，198 个 外 部 链接 


图 3-20 ”查看 外 部 链接 
3.4. 2 配置 浏览 器 


在 Dreamweaver CS6 中 创建 网 页 后 ， 最 好 设置 多 个 不 同 的 主流 浏览 


(如 JInternet 
Explorer、Netscape Navigator、NetCaptor 等 ) 


分 别 对 其 进行 预览 ， 以 得 看 不 同 浏览 吉 用 户 
的 浏览 效果 。 在 Dreamweaver CS6 中 , 按 F12 键 可 以 在 主 浏览 器 中 预览 网 页 文件 ; 按 Ctrl+F12 
组 合 键 可 以 在 次 浏览 费 中 预 筑 网 页 文件 。 通 常情 况 下 只 0 
如 果 需 要 可 以 在 “首选 参数 ”对 话 框 中 设置 多 达 20 个 浏览 


3.4.3 ”检查 浏览 器 的 兼容 性 


目前 网 页 浏览 器 的 种 类 其 多 ， Bi 制作 中 的 有 些 技 巧 ， 也 并 不 是 所 有 浏览 需 
都 能 支持 的 。 制 作 的 网 页 上 传 之 后 ， 部 分 网 页 浏览 者 可 能 看 不 到 网 页 实际 的 效果 ， 甚 至 是 
一 团 糟 。 所 以 网 页 ee 

Dreamweaver CS6 上 日 带 的 网 页 测试 系统 包含 了 一 个 浏览 右 莱 容 性 检测 功能 (BCC) ， 
它 可 以 帮助 各 种 浏览 器 的 用 户 定 位 能 够 触发 浏览 器 呈现 错误 的 HTML 和 CSS 组 合 ， 还 
可 测试 文档 中 的 代码 是 否 存 在 目标 浏览 右 不 文 持 的 任何 CSS 属性 或 值 并 生成 报告 ， 指 出 
各 种 浏览 亏 中 与 CSS 相关 的 呈现 问题 。 在 代码 视图 中 ， 这 些 问 题 以 绿色 下 划 线 来 标记 。 
每 隔 一 段 时 间 ， 乞 都 会 目 动 更 新 问题 库 ， 并 根据 此 库 的 信息 对 页 面 进行 检测 ， 并 告知 用 户 
Adobe 是 否 已 对 此 问题 作出 修正 。 此 外 ，Dreamweaver CS6 的 预览 加 入 了 默认 的 FIREFOX 
Wl a 

打开 一 个 网 页 文件 。 选 择 “ 文 件 ”/“ 检 查 页 ”/“ 浏 览 器 兼容 性 ”菜单 命令 ， 即 可 在 
打开 的 文件 中 运行 BCC， 并 在 “浏览 器 兼容 性 检查 ”面板 中 显示 检测 | 如 图 3-21 所 示 。 


搜索 | 戎 考 | 怠 证 中 训 览 器 兼容 性 
区 | 行 “问题 


训 览 器 支持 问 玛 
要 下 可 使用， ， 请 打开 文档 并 从 堪 贡 的 稍 头 菜单 中 选择 "检查 训 览 器 


amWeayer 未 报 肯 的 呈现 问题 ? 于 检查 Adobe com 
[一 下 


图 3-21 检查 浏览 器 兼容 性 
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如 朵 检 醋 结果 友 现 有 浏览 器 不 文 持 的 地 方 ， 在 测试 结果 窗口 中 能 够 看 到 是 哪 条 语句 有 
问题 ， 以 及 该 问题 对 哪些 浏览 器 有 影响 。 用 户 双 击 测试 结果 中 的 某 行 ， 即 可 目 动 定位 到 相 
应 的 代码 行 ， 做 相应 的 修改 即 可 。 

默认 情况 下 ，BCC 功能 对 下 列 浏览 占 进 行 检查 : Firefox 1.0 及 以 上 版 本 、Internet 
Explorer5.0 及 以 上 版 本 、Chrome 7.0 及 以 上 版 本 、Netscape Navigator 7.0 和 8.0、Opera 7.0、 
8.0 和 9.0 以 及 Safari 1.0 及 以 上 版 本 。 


3.5 ”站 点 发 布 


网 站 建 好 之 后 ， 下 一 步 束 将 文件 上 传 到 服务 器 发 布 该 站 点 。 远 程 文件 夹 是 存储 文件 的 
位 置 ， 这 些 文件 用 于 测试 、 生 产 、 协 作 和 发 布 。Dreamweaver 将 此 文件 夹 称 为 远程 站 点 。 
因此 在 友 布 站 点 之 前 ， 必 须 先 配 置 远程 站 点 ， 并 能 够 访问 远程 Web 服务 器 。 


3.5.1 配置 远程 站 点 


(1) 选择 “站 点 ”/“ 管 理 站 点 ”命令 ， 打 开 “ 管 理 站 点 ”对 话 框 。 

(2) 选中 需要 上 传 的 站 点 ， 然 后 单 击 “ 编 辑 ” 按 钮 [总 |， 在 弹出 的 对 话 框 左 侧 的 “分 
类 ”中 选择 “服务 器 ”项 。 

(3) 单 击 “ 添 加 新 服务 器 ”按钮 [二 |， 在 弹出 的 对 话 框 的 “连接 方式 ”下 拉 列 表 中 选 
择 连 接 到 远程 站 点 的 方式 。 

连接 到 Internet 上 的 服务 器 的 最 常见 方法 是 “FTP”。 如 果 使 用 本 地 计算 机 作为 Web 
服务 器 ， 则 连接 到 本 地 计算 机 的 最 常见 方法 是 “本 地 /网 络 ”。 如 果 不 确定 选择 哪 种 方法 ， 
请 询问 服务 占 的 系统 管理 员 。 本 例 选 择 “ 本 地 / 网 络 ”， 如 图 3-22 所 示 。 

(4) 切换 到 “高 级 ”页 面 ， 设 置 远程 站 点 文件 的 维护 选项 ， 如 图 3-23 所 示 。 

如 果 和 希望 Dreamweaver 目 动 同步 本 地 和 远 端 文件 ， 则 选中 “维护 同步 信息 ” 复 选 框 。 
如 果 希 望 在 保存 文件 时 Dreamweaver 自动 将 文件 上 传 到 远程 站 点 ， 则 选中 “保存 时 自动 
将 文件 上 传 到 服务 器 ” 复 选 框 。 如 果 希 望 激活 “ 存 回 /取出 ”系统 ， 则 选中 “启用 文件 取出 
功能 ”。 


服务 器 名 称 ; [myserver 远程 服务 器 
连接 方法 ; | 本 地 /网 路 je 性 维护 同步 信息 
Fre 口 保存 时 自动 将 交 件 上 传 到 服务 器 
| JsFTp 口 让 用 交 件 取出 功能 
Web URL; | FTp over 55LITL5( 隐 式 加 密 ) Vi 打开 文件 之 前 取出 
FTP over 55LITL5《 显 式 加 密 ) 取出 名 称 : 
v 本 地 | 
址 : 
ei 电子 邮件 地 址 
RDS 
测试 服务 器 
服务 器 模型 : 
保存 取消 保存 取消 


图 3-22 ”配置 服务 右 信 息 1 图 3-23 ”配置 服务 右 信 息 2 
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(5) 单 击 “保存 ”按钮 ， 
的 复 选 框 ， 如 图 3-24 所 未 。 


站 点 设置 对 锣 café 


次 加 的 服务 帮 被 添加 到 服务 器 列表 中 。 选 中 “远程 ”对 应 


您 将 在 此 位 置 选 择 举 载 web 上 的 页 面 的 服务 器 。 此 对 话 框 的 设置 来 自 
Internet 服务 提供 商 (ISP) 或 Web 管理 员 。 


注意 ; 要 开始 在 Dreamweaver 站 点 上 工作 ， 
布 页 面 ， 您 只 需 定义 一 个 远程 服务 器 即 可 。 


您 无 需 完成 此 步 又。 如果 要 连接 到 Web 并 发 


| 连接 | 远程 “| 负 试 | 
E:JDreamweaver C56 标 准 ,， 本 地 | 网络 ”加 性 


myseryer 


图 3-24 ”服务 占 列 表 


(6) 设置 完毕 ， 单 击 “ 保 存 ” 按 钮 关闭 对 话 框 ， 完 成 远程 站 点 的 配置 。 


3.5.2 ” 上传、 下 载 与 同步 更 新 


上 传 和 下 载 是 在 互联 网 上 传输 文件 的 专门 术语 。 一 般 来 说 ， 用 户 把 目 己 计算 机 上 的 文 
件 复制 到 远程 计算 机 上 的 过 程 称 作 上 传 ， 相反 ， 用 户 从 某 侣 远程 计算 机 上 复制 文件 到 目 己 
计算 机 上 的 过 程 ， 称 作 下 载 。 

在 正常 的 浏览 过 程 中 ， 用 户 经 常会 进行 上 传 、 下 载 操 作 。 在 设置 好 本 地 站 点 信息 和 远 
ee 就 可 以 进行 本 地 站 点 与 远程 站 点 间 文 件 的 上 传 与 下 载 了 。 

上传 站 点 文件 Dreamweaver CS6 内 置 了 强大 的 FTP 功 能 ， 可 以 帮助 用 户 便捷 地 实 

pg 的 上 传 和 下 载 。 利 用 Dreamweaver 上 传 发 布 网 站 的 具体 操作 步骤 如 下 : 

(1) 依照 本 章 上 一 节 中 介绍 的 步骤 配置 远程 站 点 之 后 ， 单 击 “ 文 件 ” 面 板 工 具 栏 中 
的 “展开 以 显示 本 地 和 远 端 站 点 ”按钮 国 ， 以 显示 本 地 和 远 端 站 点 ， 如 图 3-25 所 示 。 


DW 文件 f) 编辑 FF) 查看 0) 站 点 (5) 。 国 r 准 。 品 v 设计 器 。 [-Io|l x | 
6 crt vjC | 有 Ej 歇 鲁 |3 全 信人 名 全 | 国 
务 和 
: DD mR cafe Bi 文件 夹 2012-6-25 17:23 
9 blog 站 件 夹 201 #9- blog 次 件 夹 2012-6-25 15:29 - 
9 cho4 文件 来 201 -BD cho4 净 件 夹 2012-6-25 15:29 - 
9 cho5 次 件 夹 ”201 9 cho5 次 件 夹 。 2012-6-25 15:29 - 
9- choe 次 件 夹 201 9 cho8 六 件 夹 。 2012-6-25 15:29 - 
昌国 <ho7 文件 来 ”201 9 cho7 文件 夹 ”2012-6-25 15:29 -一 
9 cho8 次 件 夹 201 9 ch08 次 件 夹 。 2012-6-25 15:29 - 
相国 cho9 训 件 夹 201 7 chog 净 件 夹 2012-6-25 15:29 - 
相国 chi0 次 件 夹 。 2012 = 由 -加 cehln0 文件 夹 2012-6-25 15:29 - 
#9. chll 次 件 夹 201 #9- chll 六 件 夹 。 2012-6-25 15:29 - 
9 chi2 次 件 夹 201 #9- chl2 文件 夹 ”2012-6-25 15:29 - 
#9- chl3 文件 夹 201 由 轩 cehl3 文件 夹 2012-6-25 15:29 - 
+ 回 educat1lom 女 件 来 201 [| educati or 女 件 来 2012-6-25 15:29 - 
+ images 立 件 来 201 .BB images 站 件 夹 2012-6-25 17:23 - 
4 Library 次 件 夹 。 201: 004. jpg 23IBE JPG 六 件 2007-3-18 10:13 
HD Scripts 闲人 件 夹 。 201: 005e. jpg 58JB JPG 文件 2007-1-13 16:52 
9 Spryhssets 次 件 夹 201: 008. jpg 4T7IE JPG 女 件 2007-3-18 10:13 
a- Templates 净 件 夹 201: 一 010aj. jpg 86KB JPG 文件 2007-1-2 22:00 
中 blogb. dwt SHE IWT 文件 ”2011 D22av, jpge 66IB JPG 文件 2007-1-13 17:13 
liu famous. dwt 3IB DWT 文件 ”2011 022av0. jpg 62IB JFG 文件 2011-3-14 15:4B 
可 基 模 板 . dwt 18B DWT 文件 ”2011 025ayl. jpg 43 下 JFG 文件 2007-3-25 19:25 
可 定义 可 编辑 区 域 . dwt 2IE DWT 文件 ”2011 032blf. jpg 46 邢 JPG 文件 2007-1-13 16:53 
四 定 兴 可 选区 域 . dwt 1IB IWT 文件 ”2011 总 | 03careles... 4.. .IF3 音 ..，2011-3-15 10:28 
加 定 兴 重复 区 域 . dwt 2IE IWT 文件 ”2011 040908fru. . . 322IB JFG 廊 件 2007-1-4 14:52 
可 垦 套 模板 . dwt 2 到 IWT 文件 ”2011 曾 040908fru. .. 322IBE JFG 文件 2007-1-4 14:53 
而 和 而 一 i 国 
@ 


图 3-25 ”显示 本 地 和 远 问 站 点 


(2) Hip 9 en ea eid eget a hin 


“了 文件” 面 
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板 的 “ 远 病 站 点 ” 窗 格 中 将 显示 远程 服务 帮 中 的 文件 目录 。 

(3) 在 “文件 ”面板 的 “本 地 文件 ” 窗 格 中 选择 本 地 文件 来 ， 然 后 将 它们 拖 动 到 “ 远 
闹 站 点 ” 窗 格 中 的 某 个 文件 夹 中 。 或 从 “本 地 文件 ” 窗 格 中 选择 文件 ， 然 后 单 击 “ 同 远程 
服务 器 上 传 文件 ”按钮 鳃 ，Dreamweaver CS6 会 将 所 有 站 点 文件 上 传 到 指定 服务 器 的 远程 
es 

Dreamweaver CS6 改 善 了 FTP 性 能 .利用 对 jQuery Mobile 和 Adobe PhoneGap™ 框 
架 的 更 新 文 持 ， 可 以 便捷 地 建立 移动 应 用 程序 。 利 用 重新 改 恨 的 多 线程 FTP 传输 工具 和 
图 像 编 辑 功 能 ， 可 以 有 效 地 设计 、 开 发 并 发 布 网 站 和 移动 应 用 程序 ， 市 省 上 传 大 型 文件 的 


1 i 
“提示:j 呆 要 上 传 的 文件 尚未 保存 ， 可 能 会 出 现 一 个 对 话 框 (取决 于 用 户 在 “ 首 


| 选 参 数 ” 对 话 框 的 “站 点 ”类 别 中 设置 的 首选 参数 ) ， 提 示 用 户 在 将 文件 上 传 到 远 端 ， 
服务 器 之 前 进行 保存 。 如 果 出 现 对 话 框 ， 请 单 击 “ 是 ”保存 该 文件 ， 或 者 单 击 “ 否 ” | 


| 将 以 前 保存 的 版 本 上 传 到 远 端 服务 器 上 . 


本 地 站 点 和 远程 web 站 点 应 该 具有 完全 相同 的 结构 ， 在 这 两 种 站 点 之 间 传 输 文件 时 ， 
如 果 站 点 中 不 存在 必需 的 文件 夹 ， 则 Dreamweaver 将 目 动 创建 这 些 文件 夹 。 如 果 使 用 
Dreamweaver 创 建 本 地 站 点 ， 然 后 将 全 部 内 容 上 传 到 远程 站 点 ， 则 Dreamweaver 能 确保 在 远 
程 站 点 中 精确 复制 本 地 结构 。 
站 点 的 发 布 是 一 个 持续 的 过 程 ,这 一 过 程 的 一 个 重要 部 分 是 定义 并 实现 一 个 版 本 控制 
系统 ， 既 可 以 使 用 Subversion， 也 可 以 使 用 外 部 的 版 本 控制 应 用 程序 。 
2. 下 载 站 点 文件 ”执行 以 下 操作 之 一 可 以 下 载 站 点 文件 : 
令 ” 在“ 远 问 站 点 ” 窗 格 中 选择 需要 下 载 的 文件 ， 然 后 将 它们 拖 动 到 “本 地 文件 ” 
格 中 的 某 个 文件 夹 中 。 或 在 “ 远 病 站 点 ” 窗 格 中 选择 文件 ， 然 后 单 击 “ 从 远程 服 
务 器 获取 文件 ”按钮 总 ， 即 可 下 载 文 件 。 
令 ”在 “文件 ”面板 中 右键 单 击 要 下 载 的 文件 ， 然 后 从 上 下 文 菜 单 中 选择 “获取 ” 命 
Ee 
3. 远程 与 本 地 站 点 同步 上传 站 点 之 后 ， 可 能 会 因为 网 页 制作 者 的 玖 忽 或 多 人 编辑 
维护 ， 出 现 本 机 网 页 文件 和 远程 网 页 文件 不 一 致 的 现象 。 利 用 Dreamweaver 的 站 点 同步 功 
能 可 以 轻松 修正 这 种 问题 ， 方 便 对 站 点 进行 更 新 维护 。 其 步骤 如 下 : 
(1) 执行 “站 点 ”/“ 同 步 站 点 光 围 ” 采 单 命令 ,打开 “同步 文件 ”对 话 框 ， 如 图 3-26 
所 示 。 


与 远程 服务 需 同 步 
辣 步 6): RT | 


方向 血 ) : | 放置 较 新 的 文件 到 远程 v 
ET 


癌 ] 册 除 本 地 驱动 器 上 没有 的 远 端 文件 


图 3-26 ”同步 文件 
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(2) 在 “同步 ”下 拉 列 表 慌 曲 选 择 同 步 的 洱 因 六 如 当前 整个 站 点 或 当前 选中 文件 。 

(3) 在“ 方 问 ”下拉 列表 框 中 设置 文件 同步 的 方式 。 

(4) 如 果 要 将 本 地 上 没有 的 远程 站 点 上 的 文件 删除 ， 则 选中 “删除 本 地 驱动 右上 没 
有 的 远 蜗 文件 ” 复 选 框 。 

(5) 畦 击 “ 预 欠 ” 按 钮 辟 示 更新 设置 预 多 对 话 框 ， 如 图 3-27 所 未 。 

(6) 如 末 存 在 需要 更 新 的 文件 ， 选 中 该 文件 劳 边 的 “上 传 ” 按 钮 ， 然 后 单 击 “确定 ” 
按钮 。 全 此， 远程 与 本 机 文件 的 同步 完成 


文件 :0 将 被 更 新 ，692 将 被 跳 过 


动作 文件 
[已 同步 | bloa\bi 
el 


全 已 同步 | bloa\Conmmections\myconn. asp 


鲜 已 同步 | 轴 bloe\data\product. mdb 
怨 已 同步 bloe\images\photo\l11S5. gif 


泡 已 同步 TT bloe\images\photo\l13. gif 
瑟 已 同步 有 bloz\images\photo\l13024. ipg 


中 显示 所 有 文件 
要 更 改动 作 ， 请 选择 文件 并 单 击 下方 的 其 中 一 个 图 标 ， 然 后 单 击 " 确 定 "。 


| 全 | 面 | SB | 个 | 外 


图 3-27 ”同步 预 帘 


上 传 和 下 载 操 作 不 仅 于 此 , 利用 其 他 的 一 些 工具 , 例如 FTP 程 序 等 , 可 以 直接 将 Internet 
服务 器 上 的 站 点 结构 及 其 中 的 文件 下 载 到 本 地 计算 机 ， 经 过 修改 ， 又 可 以 利用 相应 的 工具 
将 修改 后 的 网 页 上 载 到 Internet 服 务 器 上 ， 实 现 对 站 点 的 更 新 。 

创建 网 站 并 不 是 一 件 一 劳 永 逸 的 事情 ， 与 其 他 媒体 一 样 ， 网 站 也 是 一 个 媒体 ， 同 样 需 
要 经 常 更 新 维护 才 会 起 到 既定 的 商业 效果 。 不 进行 维护 的 网 站 很 快 束 会 因 内 容 陈 上 昌 、 信 息 
过 时 而 无 人 问津 。 因 此 建 好 网 站 之 后 ， 还 需要 实时 对 网 站 内 容 进 行 更 新 。 


3.6 ”实例 制作 之 将 已 有 文件 组 织 为 站 点 


在 本 书 第 1 革 中 己 对 个 人 网 站 实例 进行 了 和 仔细 规划 ， 收 集 、 制 作 了 需要 的 站 点 资源 ， 
如 LOGO、 叶 航 条 背景 、 商 品 图 片 等 ， 并 建立 了 相应 的 文件 夹 目录 结构 。 本 方 将 这 些 已 有 
的 文件 夹 组 织 为 一 个 站 点 。 步 又 如 下 : 
01 启动 Dreamweaver CS6， 执 行 “ 站 点 ”/“ 狐 建站 点 ”命令 ， 打 开 站 点 设置 对 话 


框 。 


Ty 生意 : 

2 - 本 实例 中 用 到 的 文件 路 径 \inetpub\wwwroot\ 是 在 本 地 计算 机 系统 中 成 功 安 
装 IIS 服务 器 之 后 自动 生成 的 文件 夹 ， 是 Web 站 点 默认 的 主 目 录 。 建 议 读者 在 创建 站 
点 时 , 最 好 将 本 地 站 点 文件 夹 放 置 在 主 目 录 之 下 ,或 将 本 地 站 点 文件 夹 定 义 为 Web 服 
务 器 中 的 虚拟 目录 。 如 果 用 来 处 理 动态 页 的 文件 夹 不 是 主 目 录 或 其 任何 子 目 录 ， 则 必 
须 创 建 虚 拟 目 录 。 有 关 主 目录 和 虚拟 目录 的 介绍 ， 读 者 可 以 参阅 本 书 第 13 章 13.3 节 
的 介绍 或 相关 书籍 
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02 9 在 “站 点 名 称 ” 后 面 的 对 话 框 申 输 入 站 点 名 称 blog。 

03 9 蛙 击 “本 地 站 点 文件 夹 ” 右 侧 的 文件 夹 图 标 ， 济 览 鲁 ci:\inetpub\wwwroot\blog\ 目 
录 ; 或 直接 输入 cinetpub\wwwroot\blog\。 

04) 同 理 ， 设 置 “ 默 认 网 像 文 件 夹 ”的 路 径 为 cinetpubvwwwroot\blogNimages\。 

05 在 “链接 相对 于 ” 栏 ， 选 择 “ 文 档 ” 选 项 。 在 “Web URL” 夸 侧 的 文本 框 中 输 
入 http://localhost/blog/。 

如 果 制 作 静 态 站 点 ， 到 这 一 步 就 完成 了 。 由 于 本 例 需 要 制作 动态 页 面 ， 因 此 还 需要 创 

建 虚拟 目录 、 设 置 测 试 服务 疾 。 

06 创建 虚拟 目录 。 在 要 设置 为 虚拟 目录 的 文件 夹 c:\inetpub\wwwroot\blog 上 单 击 限 
标 右 健 ， 从 弹出 的 快捷 沫 单 中 选择 “属性 ”命令 ， 打 开 “Web 共 有 部” 选项 卡 。 选 中 “共享 
文件 夹 ” 单 选 按钮 ， 然 后 在 弹出 的 “编辑 别名 ”对 话 框 中 设置 该 文件 夹 的 别名 为 bljog。 单 
击 “ 硝 定 ” 按 钮 天 闭 对 话 框 。 

07 9 单 击 “站 点 设置 ”对 话 框 左 侧 的 “分 类 ”列表 中 的 “服务 器 ”， 切 换 到 对 应 的 
对 话 框 。 单 击 “ 添 加 新 服务 器 ”按钮 [二 |， 依 照 本 章 3.5.1 节 所 述 步骤 添加 一 个 服务 器 ， 访 
问 方式 为 “本 地 /网 络 ”。 

08 切换 到 “高 级 ”页 面 ， 在 “服务 喜 模 型 ”下 拉 列 表 中 选择 “ASP VBScript”。 

09 上 月 单 击 “ 保 存 ” 按 钮 关闭 “高 级 ”屏幕 ， 并 在 “服务 器 ” 关 别 中 指定 服务 器 类 别 
为 测试 服务 器 ， 然 后 单 击 “确定 ”按钮 ， 即 可 将 指定 文件 夹 定 义 为 站 点 。 

将 文件 夹 目录 结构 组 织 为 站 点 后 ， 即 可 以 将 磁盘 上 现 有 的 文档 组 织 当 作 本 地 站 点 打 

开 ， 便 于 以 后 统一 管理 。 
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4.1 在 网 页 中 加 入 文本 


网 页 作为 一 种 传播 信息 的 巡 体 ， 文 字 是 传递 信息 的 最 重要 的 媒介 。 从 网 页 最 初 的 纯 文 
字 界 面 发 展 至 今 ， 文 学 仍 是 其 他 任何 元 素 无 法 取代 的 重要 构成 。 这 首先 是 因为 文字 信息 符 
合 人 类 的 阅读 习惯 ， 其 次 因为 文子 所 占 存 取 空 间 小 ， 市 管 了 下 载 和 浏览 时 间 。 

在 制作 网 页 的 时 候 ， 文 本 的 创建 与 编辑 占据 了 制作 工作 的 很 大 部 分 内 容 。 能 侍 对 各 种 
文本 控制 手段 运用 目 如 ， 是 决定 网 页 设计 是 否 关 观 、 师 有 创意 以 及 提 融 工作 效率 的 关键 。 


4.1.1 插入 文本 


在 Dreamweaver CS6 中 输入 文本 有 以 下 儿 种 方法 : 
(1) 直接 在 Dreamweaver 的 文档 窗口 光标 所 在 位 置 输入 文本 内 容 。 
(2) 在 其 他 的 应 用 程序 或 文档 中 复制 文本 ， 然 后 切换 回 Dreamweaver 文 档 窗口 ， 将 光 
标 插 入 到 要 放置 文本 的 地 方 ， 再 选择 “编辑 ”/“ 粘 贴 ”或 “选择 性 粘贴 ”命令 。 
利用 Dreamweaver CS6 的 粘贴 选项 ， 可 以 保留 所 有 源 格式 设置 ， 也 可 以 只 粘贴 文本 ， 
还 可 以 指定 粘贴 文本 的 方式 。 
(3) 使 用 “文件 ”/“ 守 入 ”命令 导入 其 他 文档 中 的 文本 ， 如 XML、 表 格式 数据 、word 
文档 和 Excel 文 档 。 
(4) 从 文 持 文 本 拖 放 功能 的 应 用 程序 中 拖 放 文本 到 Dreamweaver CS6 的 文档 窗口 。 


4.1.2 设置 文本 属性 


网 页 中 的 文字 主要 包括 标题 、 信 息 、 文 字 链 接 等 几 种 主要 形式 。 民 好 的 文本 格式 ， 能 
够 充分 体现 文档 要 表述 的 意图 ， 激 发 读者 的 阅读 兴趣 。 在 文档 中 构建 丰富 的 字体 、 多 种 的 
段落 格式 以 及 黄 心 悦目 的 文本 效果 ， 对 于 一 个 专业 的 网 站 来 说 ， 是 必 不 可 少 的 要 求 之 一 。 

文本 的 大 部 分 格式 设置 都 可 以 通过 属性 设置 面板 实现 。 执 行 “ 窗 口 ”/“ 属 性 ”命令 ， 
即 可 打开 属性 设置 面板 ， 如 图 4-1 所 示 。 


尾 性 

[x> ML| | 格式 8) | 无 v 关 无 v| BI 泻 拉手 

国 css In (I) 无 v | 链接 民 ) | v | 舍 白 目标 (6) 
页 和 面 尾 性 ... 


"We 
太古 


图 4-1 文本 属性 设置 面板 


打开 属性 面板 之 后 ， 单 击 面板 左上 角 的 攻 2amc 按 钮 ， 即 可 设置 HTML 格 式 ， 如 图 4-1 
所 示 。 访 属性 设置 面板 中 各 个 选项 的 功能 简要 介绍 如 下 : 

格式 : 设置 所 选 文本 的 段 沙 样式 。 

“无 ”是 系统 的 默认 设置 ， 从 光标 所 在 行 的 左边 开始 输入 文本 ， 没 有 对 应 的 HTML 
标识 ，“ 段 洲 ” 表 示 将 文本 内 容 设 置 为 一 个 段落 ; “标题 1” 到 “标题 6” 用 于 议 症 不 同 


S1 


起 融 是 导 灶 出 序 ” 妇 p 波 
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级 别 的 标题 ; “预先 格式 化 的 ”用 和 手 预 定义 一 个 段 洛 ， 使 用 该 格式 ， 可 以 在 文本 中 插入 多 
个 空格 ， 从 而 可 以 任意 调整 文本 内 容 的 位 置 。 

ID: 为 所 选 内 容 分 配 一 个 ID 。 如 果 已 声明 过 ID， 则 该 下 拉 列 表 中 将 列 出 文档 的 所 有 
未 使 用 的 已 声明 ID。 

类 : 显示 当前 应 用 于 所 选 文本 的 类 样式 。 如 果 没 有 对 所 选 内 容 应 用 过 任何 样式 ， 则 弹 
出 亲 单 显示 “无 ”。 如 果 已 对 所 选 内 容 应 用 了 多 个 样式 ， 则 弹出 式 荣 单 将 显示 当前 页 面 
所 有 使 用 过 的 样式 。 使 用 “样式 ”弹出 及 时 可 执行 以 下 操作 : 

(1) 选择 “无 ”， 删 除 当前 所 选 样 式 。 

(2) 选择 要 应 用 于 所 选 内 容 的 样式 。 

(3) 选择 “ 重 命 名 ”， 可 以 重 命 名 当前 选 定 文本 采用 的 样式 。 

(4) 选择 “附加 样式 表 ”， 打 开 一 个 可 以 附加 外 部 样式 表 的 对 话 框 。 

链接 : 创建 所 选 文本 的 超 文 本 链接 。 有 以 下 儿 种 方式 : 

(1) 单 击 文件 夹 图 标 浏览 站 点 中 的 文件 。 

(2) 直接 键入 文件 URL。 

(3) 将 “指向 文件 ”图 标 况 拖 到 “文件 ”面板 中 需要 的 文件 。 

(4) 将 文件 从 “文件 ”面板 拖 到 “链接 ”文本 框 中 。 

下 将 文本 字体 设置 为 粗 体 。 

: 将 文本 字体 设置 为 冬 体 。 
: 项 目 列 表 。 选 择 需 要 建立 列表 的 文本 ， 并 单 击 该 按钮 ， 即 可 建立 无 序列 表 。 
: 编号 列表 ， 用 于 建立 有 序列 表 。 
: 删除 内 缩 区 块 ， 减 少 文本 右 缩 进 。 
: 内 缩 区 块 ， 增 加 文本 右 缩 进 。 

sam 为 超级 链接 指定 文本 工具 提示 ， 即 在 浏览 器 中 ， 当 鼠标 移 到 超级 
链接 上 时 显示 的 提示 文本 。 

有 标 8) | 当 ， 指 定 链接 文件 打开 的 方式 。 

(1) _blank: 将 链接 文件 加 载 到 一 个 狐 的 、 未 命名 的 浏览 器 窗口 。 

(2) _parent: 将 链接 文件 加 载 到 该 链接 所 在 框架 的 父 框架 集 或 父 窗 口中 。 如 果 包 含 
链接 的 框架 不 是 航 套 的 ， 则 链接 文件 加 载 到 整个 浏览 占 窗 口中 。 

(3) _self: 将 链接 文件 加 载 到 该 链接 所 在 的 同一 框架 或 窗口 中 。 此 目标 是 默认 的 ， 
因此 通常 不 需要 指定 它 。 

(4) _top: 将 链接 文件 加 载 到 整个 浏览 器 窗口 ， 从 而 删除 所 有 框架 。 

页面 属 性 ..._|， 单 击 此 按钮 弹出 “页 面 属性 ”对 话 框 ， 对 页 面 属性 进行 设置 。 

列表 项 目 ..._， 列表 项 的 属性 设置 窗口 。 将 光标 放置 在 任意 列表 位 置 ， 则 该 按钮 变 为 
可 用 ， 单 击 该 按钮 ， 即 可 打开 列表 属性 设置 窗口 ， 进 行 相应 的 设置 。 

单 击 属性 面板 左上 角 的 | 胞 55s 按钮 ， 即 可 使 用 CSS 规 则 格式 化 文本 ， 如 图 4-2 所 示 。 


i 


山 


属性 = 

《> 1HL 目标 规则 < 条/ css 规则 > 字体 (0) | 默认 字体 v|B 了 I 主 琶 二 县 ® 

[Bes CE KB 加 加 “| | 区 
| 页面 属性 ... | 


图 4-2 ”CSS 规则 属性 
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目标 规则 : 显示 当前 选中 文本 已 应 用 的 规则 ， 或 在 CSS 属性 检查 天 中 正在 编辑 的 规 
则 。 

用 户 可 以 使 用 “目标 规划 ”下 拉 有 末 单 中 的 命令 创建 新 的 CSS 规则 、 新 的 内 联 样式 或 将 
现 有 类 应 用 于 所 选 文 本 。 使 用 “目标 规则 ”可 以 执行 以 下 操作 : 

(1) 将 插入 点 放 在 已 应 用 CSS 规 则 的 文本 块 中 ， 可 以 会 看 文本 块 应 用 的 CSS 规 则 。 

(2) 从 “目标 规则 ”下 拉 列 表 中 选择 一 个 规则 ， 即 可 应 用 于 当前 选中 的 文本 。 

(3) 通过 使 用 CSS 属性 检查 套 中 的 各 个 选项 对 已 创建 的 规则 进行 更 改 。 


y 注意 : 
一 在 创建 CSS 内 联 样 式 时 ，Dreamweaver 会 将 样式 属性 代码 直接 添加 到 页 


面 的 body 部 分 。 


编辑 规则 : 单 击 该 按钮 可 以 打开 目标 规则 的 “CSS 规则 定义 ”对 话 框 进行 修改 。 

如 果 从 “目标 规则 ”下 拉 列 表 中 选择 了 “新 建 CSS 规则 ”选项 ， 然 后 单 击 “编辑 规 
则 ”按钮 ， 则 Dreamweaver 会 打开 “新 建 CSS 规则 定义 ”对 话 框 。 

CSS 面板 : 单 击 该 按钮 可 以 打开 “CSS 样式 ”面板 ， 并 在 当前 视图 中 显示 目标 规则 
的 属性 。 

“字体 ”: 设置 目标 规则 的 字体 。 如 果 字 体 列 表 中 没有 需要 的 字体 ， 可 以 单 击 字体 下 
拉 列 表 中 的 “编辑 字体 列表 ”项 ， 在 弹出 的 对 话 框 中 设置 需要 的 字体 列表 。 

“大 小 ”: 设置 目标 规则 的 字体 大 小 。Dreamweaver CS6 预 置 了 18 种 字号 。 

[将 所 选 颜色 设置 为 目标 规则 中 的 字体 颜色 。 


y 注意 : 

C9 Ss Wa “文本 顾 人 “ 粗 体 ”、 “斜体 ”和 “对 齐 ” 属 性 始终 显示 应 
用 于 “文档 ”窗口 中 当前 所 选 内 容 的 规则 属性 。 在 更 改 其 中 的 任何 属性 时 ， 将 会 影响 目 
标 规 则 。 


4.1.3 创建 列表 项 


在 编辑 网 页 时 ， 第 第 需要 对 同 级 或 不 同 级 的 多 个 项 目 进行 编号 或 排列 ， 以 显示 多 个 项 
目 间 的 层次 关系 ， 或 使 文本 布局 更 有 条 理 ， 这 就 需要 用 到 列表 。 

在 Dreamweaver 中 可 以 从 已 有 的 文本 或 者 从 文档 窗口 中 的 新 文本 创建 项 目 列表 和 编号 
列表 ， 列 表 还 可 以 被 舱 套 。 项 目 列表 在 各 个 项 的 前 面 没有 数字 ， 用 不 同 的 符号 及 缩 进 的 多 
少 来 区 分 不 同 的 层次 ;编号 列表 则 需要 通过 数字 及 缩 进 区 分 不 同 的 层次 。 

下 和 而 通过 一 个 例子 说 明 如 何在 文档 中 创建 列表 。 操 作 步 又 如 下 : 

01 汤 建 一 个 文档 。 在 文档 窗口 中 输入 需要 列表 的 文本 ， 如 图 4-3a 所 示 。 

02 和 用 了 女 标 选择 除 “ 他 白文 集 ” 以 外 的 其 他 项 内 容 , 单 击 属性 设置 面板 中 的 二 | 按钮 ， 
则 所 有 项 目的 左边 都 会 加 入 一 个 “@” 符 写 ， 这 样 所 有 项 目 都 被 当 作 无 序列 表 的 第 一 层 。 
如 图 4-3b 所 示 。 
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和 03 选择 “山中 问答 ”、 “和 军 行 ”两 项 ， 单 雷 属 性 设置 面板 中 的 缩 进 按钮 盐 ,， 使 它 
们 回 右 缩 进 ， 则 这 两 项 左边 的 “ 鲜 符 亏 变 成 了 “OO” 符 吕 ， 表 示 它 们 在 列表 的 第 二 层 。 
同 理 设 置 其 他 项 ， 最 终 效 果 如 图 4-3c 所 示 。 


a) b) 
图 4-3 ”设置 项 目 列表 

设置 编写 列表 的 方法 与 设置 项 目 列表 的 方法 相似 。 继 续 使 用 上 例 。 

和 019 用 鼠标 选择 除 “ 李 白文 集 ” 以 外 的 其 他 内 容 ， 单 击 属性 设置 面板 中 的 按钮 斌 ，， 
则 所 有 项 目 左边 都 会 加 入 数字 , 这 样 所 有 项 目 都 被 当 作 无 序列 表 的 第 一 层 , 如 图 4-4a 所 不 。 

和 02) 选择 “山中 问答 ”、“ 军 行 ”两 项 ， 单 击 属性 设置 面板 中 的 缩 进 按钮 些 |， 使 它 
们 回 右 缩 进 ， 则 这 两 项 左边 会 按 顺 序 加 入 数字 ， 表 示 扬 们 是 列表 的 第 二 层 。 同 理 设 置 其 他 
项 ， 如 图 4-4b 所 示 。 

此 外 ， 还 可 以 将 编号 列表 和 项 目 列表 混 排 。 例 如 ， 在 设置 好 编号 列表 后 ， 如 果 选 择 列 
表 的 第 二 层 ， 如 “山中 间 答 ”、“ 军 行 ”两 项 ， 单 击 属性 设置 面板 中 的 项 目 编号 按钮 ， 则 
这 两 项 左边 的 数字 编号 会 变 为 项 目 编号 ， 如 图 4-5$ 所 示 。 


图 4-4 ”设置 编号 列表 图 4-5 ”编写 列表 、 项 目 列表 混 排 


4.1.4 插入 日 期 


在 网 页 中 ， 经 常会 看 到 显示 有 日 期 旦 自动 更 狐 。Dreamweaver CS6 为 读者 提供 了 插入 
日 期 的 功能 ， 使 用 它 可 以 用 任意 格式 在 文档 中 插入 当前 时 间 ， 同 时 日 期 目 动 更 新 。 下 面 通 
过 一 个 简单 的 例子 泪 示 在 文档 中 插入 日 期 的 操作 方法 。 

和 019 将 插入 点 放 在 文档 中 需要 插入 日 期 的 位 置 ， 即 “ 松 稚 延 年 ” 下 面 如 图 4-6 所 示 。 

02 了 切换 到 “插入 ” 栏 中 的 “常用 ”面板 ， 单 击 面板 中 的 日 期 按钮 加 ， 弹 出 “插入 
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日 期 ”对 话 框 ， 如 图 4-7 所 示 。 


[不 要 星期 ] 
1974 年 3 月 7 
4 03/07/1974 = 
y 37T7T4 
1974-03-07 
yy T737T4 
时 间 格 式 : | [不 要 时 间 ] 3 
启 诸 存 时 自动 更 新 
松 窟 延 年 


图 4-6 ”插入 日 期 前 的 效果 图 4-7 “插入 日 期 ”对 话 框 


03 自 在 对 话 框 中 选择 星期 、 日 期 、 时 间 的 显示 方式 。 本 例 仅 设 置 日 期 ， 且 日 期 格式 
为 “1974 年 3 月 7 日 ”。 


提示: “插入 日 期 ”对话 框 中 显示 的 日 期 和 时 间 不 是 当前 日 期 ， 也 不 反映 访问 者 
i 在 查看 站 点 时 所 看 到 的 上 日期/ 时间。 它们 只 是 说 明 此 信息 的 显示 方式 的 示例 。 


04 明 如 条 访 者 布 望 插入 的 日 期 在 每 次 保存 文档 时 目 动 进行 更 新 ， 可 以 选择 对 话 杠 中 
的 “储存 时 目 动 更 新 ” 复 选 枉 。 本 例 也 选择 此 项 。 

05) 单 击 “ 确 定 ” 按 钮 ， 此 时 藉 在 文档 中 插入 了 当前 的 日 期 。 如 图 4-8 所 示 。 

06 选中 插入 的 日 期 ， 在 属性 面板 中 调整 日 期 显示 的 字体 、 大 小 和 对 齐 方式 ， 最 终 
的 效果 如 图 4-9 所 示 。 


松 骨 渤 年 松 窟 和 泛 年 
2012 年 6 月 26 日 2012 年 6 月 26 日 
图 4-8 插入 日 期 后 的 效果 图 4-9 ”最 终 效果 


4.1.5 插入 特殊 字符 


本 市 所 说 的 特殊 子 符 是 指 在 键盘 上 不 能 直接 输入 的 子 符 。 一 般 来 说 ， 在 HTML 中 一 个 
特殊 字符 有 两 种 表达 方式 ， 一 种 称 作 数字 参考 ， 另 一 种 称 作 实体 参考 。 
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所 谓 数字 参考 ， 吏 是 用 数 等 来 表示 文档 中 的 等 殊 学 符 ， 通 利 由 前 级 “&#” 加 上 数值 ， 
再 加 上 后 级 “;” 组 成 ， 其 表达 方式 为 : &#D;， 其 中 DD 是 一 个 十 进 制 数值 。 

所 谓 实 体 参 考 ， 实 际 上 就 是 用 有 意义 的 名 称 来 表示 特殊 字符 ， 通 和 常 由 前 级 “&&” 加 上 
字符 对 应 的 名 称 ， 再 加 上 上 后缀“;” 组 成 。 其 表达 方式 为 : &name; ， 其 中 name 是 一 个 用 
于 表示 字符 的 名 称 ， 且 区 分 大 小 写 。 

例如 ， 可 以 使 用 “&#169” 和 “&copy; ”来 表示 版 权 符 号 “@ 昌 ”; 用 “&#174;” 和 “&reg;” 
来 表示 注册 商标 符号 “@”。 很 显然 ， 这 比 数字 要 容易 记忆 得 多 。 不 过 ， 并 非 所 有 的 浏览 
恬 都 能 够 正确 识别 采用 实体 参考 方式 的 特殊 字符 ， 但 是 它们 都 能 够 识别 出 采用 数学 参考 方 
式 的 特殊 字符 。 

对 于 那些 单 见 的 特殊 字符 ， 使 用 其 实体 参考 方式 是 安全 的 ， 在 实际 应 用 中 ， 只 要 记 住 
这 些 常 用 特殊 字符 的 实体 参考 就 足够 使 用 了 。 对 于 一 些 特别 不 常见 的 字符 ， 则 应 该 使 用 数 
学 参考 方式 。 表 4-1 是 常用 的 一 些 学 从 实体 参考 和 数字 参考 。 

表 4-1 常见 的 字符 及 其 参考 


字符 实体 参考 “| 。 字符 数字 参考 字符 实体 参考 和 显示 


&nbsp: &#160: 衬 & lt < 
&copy; &#169; &gt; . > 
&reg; &#174:; &amp ; & 


&trade; 《HtH8482 ; &duot ; 
&pound:; &#1063;: &times:; 
&euTro &H8364: &plusmn: 
&yen:; &#165; &middot 
&cent; &#162; 

&Ssect ; 《&#167 ; 


尽管 记忆 字符 的 参考 非常 不 易 , 但 是 在 Dreamweaver CS6 中 插入 特殊 字符 却 非常 简单 。 
Dreamweaver 在 “插入 ”面板 的 “文本 ”面板 上 专门 设置 了 第 见 的 特殊 字符 按钮 ， 只 需要 
单 击 上 和 面 的 按钮 ， 即 可 插入 相应 的 特殊 字符 。 

打开 “搬入 ”面板 ， 切 换 到 “文本 ”插入 面板 ， 然 后 单 击 “ 罕 符 : 其 他 字符 ”图 标 右 
下 角 的 下 拉 和 箭头， 就 可 以 看 到 Dreamweaver 目 市 的 稼 用 特殊 字符 ， 如 图 4-10 所 示 。 


”| x 


DW WW- 0- & it - 
文件 是 ) 本 本 (2 章 看 ww) 类 入 (I 全 人情 式 0 十 宁 天 ) 因 抽 (5 午 B00 全 
【再 庆 南 雯 大 网 石 赤 二 守 订 _ 下 让 放 凡 布 隆信 再 二 代 布 国志 】_ 生 5 同 ts [La TERIA EL 
人 i i ed nt a 证 oh LD OE limo PAN -~ 
的 雹 | 因为 Ll | 
| [E39 Cs 保 涉 
ee 4 a lds 
Sm pny Lut 
W013 款 日 产 Ahima 证 析 有 杞 时 一 [| . 
PITTTTTP 二 Ee EE“ 


bb re Tr ; 1 著 5 日 从 要 镁 窜 ) 
2 1 fy 四 识 和 
嘛 长 宁 妃 中 容重 浇 光 分 相 。: 东风 本 田 配 性 [m 这 砷 南村 
寺 独 0500 科 弟 氏 草 到 入 详 妈 。: 贡 忆 CT 可 供 靳 看 mv 出 三 sl 
站 ” 
手打 
dy fatina7 iv ee oD ti i 而 好 bw x 一 一 - lp | 


图 4-10 ”查看 特殊 字符 
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如 过 在 下 拉 有 末 单 中 没有 找到 需要 的 特殊 子 生 ， 则 单 击 下 拉 有 来 单 中 的 “其 他 字符 ”按钮 ， 
打开 “插入 其 他 字符 ”对 话 框 ， 即 可 仁 看 其 他 特殊 字符 。 如 图 4-11 所 未 。 
1. 在 网 页 中 插入 特殊 字符 ”下 和 耐 通过 插入 两 个 特殊 字符 “S ”和 “9 和 ”的 示例 ， 癌 读 
者 渤 示 搬入 特殊 字 从 的 其 体 步 又 。 搬 入 后 的 效果 如 图 4-12 所 示 。 
0 全 在 文档 中 将 光标 放置 在 需要 插入 特殊 字符 的 位 置 ， 此 时 即 放 在 文字 “神山 篇 ” 
的 前 面 。 切 换 到 “插入 ”/“ 文 本 ”面板 ， 打 开 特殊 子 符 弹 出 人 染 单 。 单 击 “ 其 他 字符 ”按钮 
图 -， 打 开 “ 插 入 其 他 字符 ”对 话 框 。 
0 全 在 对 话 框 中 选择 字符 “§ ”， 然 后 单 击 “ 人 确定 ”按钮 ， 该 符号 就 插入 到 文本 中 


ys 


= ew | rs o-| 四 | = 由 


图 4-11 “插入 其 他 字符 ”对 话 框 


这 愉 所 稻城 吗 ? 它 的 美 在 哪里 呢 ? 带 着 这 些 问题 ， 拜 访 了 亚丁 人 社区 的 雪 狼 子 问 铺 了 基本 的 浏览 线路 后 ， 我 银 错 的 睡 去 
上 路 3800 米 的 地 方 ， 我 竟然 睡 得 特别 香甜 。 


币 芒 日 和 珍珠 湖 


图 4-12 ”插入 特殊 字符 效 琳 
934 同 理 ， 选 择 特殊 字符 和 ， 用 同样 的 方法 将 其 插入 。 


04 特殊 字符 和 普通 文本 一 样 ， 也 可 以 使 用 属性 面板 对 其 属性 进行 设置 ， 例 如 设置 
了 字体 、 大 小 、 颜 色 、 样 式 等 。 
在 文档 中 插入 特殊 字符 后 ， 特 殊 字 符 在 设计 视图 和 代码 视图 中 的 显示 是 不 同 的 ， 在 设 
计 视 图 中 显示 的 是 所 输入 的 字符 ， 而 在 代码 视图 中 显示 的 则 是 特殊 子 符 的 实体 参考 。 
2. 换行 符 谈 到 特殊 字符 ， 有 必要 介绍 一 下 在 网 页 制作 中 第 会 用 到 的 两 个 特殊 字符 : 
换行 符 甸 和 非 间 断 空格 符 记 ，。 
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一 个 文本 中 通常 包括 了 多 个 段 沙 ， 所 谓 段 光 ， 束 是 一 段 格 式 上 统一 的 文本 。 一般 情况 
下 ， 上 段落 不 能 在 一 行 中 完全 显示 ， 而 是 由 多 行文 学 组 成 。 在 Dreamweaver 中 ， 文 本 上 共有 日 
动 换行 功能 ， 但 是 目 动 换行 必须 是 在 文本 一 行 结束 的 时 候 才 能 够 进行 。 在 文档 窗口 中 ， 每 
和 输入 一 段 文字 ,， 抠 下 Enter 键 后 ， 吏 目 动 生 成 一 个 段 洲 。 按 下 Enter 键 的 操作 通 音 家 称 作 使 问 
车 ， 可 以 说 ， 有 段落 束 是 市 有 便 回 车 的 文学 组 合 。 但 是 如 果 要 在 段 洲 中 实现 强制 换行 的 同时 
不 改变 段落 的 结构 ， 就 必须 插入 特殊 字符 面板 中 的 换行 符 ， 或 按 下 Shift + Enter 组 合 键 。 

在 HIML 中 ， 段 落 换 行 对 应 的 标签 是 <p> 和 </p>， 而 换行 符 的 标签 是 <br> 。 在 
Dreamweaver 的 文档 窗口 中 , 每 按 下 一 次 Enter 键 ,都 会 日 动 将 输入 的 段落 包围 在 <p> 和 </p> 
标记 之 中 。 例 如 以 下 的 代码 显示 了 一 段 文字 : 

<p> 网 页 制作 DIY 系 列 一 Dreamweaver CS6</p> 

实际 上 上 ， 有 了 时候 可 以 不 使 用 <p> 和 </p> 标 记 ， 而 是 采用 其 他 类 型 的 标记 来 定义 段落 。 
例如 ， 将 一 行文 学 设置 为 “标题 1” 格 式 ， 实际 上 是 将 该 行文 学 两 端 瀛 加 <h1> 和 </h1> 标 记 ， 
它 一 方面 定义 了 该 行文 学 的 标题 级 别 ， 另 一 方面 也 起 到 定义 该 行文 字 为 一 个 段落 的 作用 。 

使 用 属性 面板 中 的 “格式 ”弹出 采 单 或 “文本 ”/“ 段 沙 格 式 ” 子 末日 可 以 应 用 标准 段 
洲 和 标题 标签 。 对 段落 应 用 标题 标签 时 ，Dreamweaver 目 动 添加 下 一 行文 本 作为 标准 段落 。 
否 要 更 改 此 设置 ， 请 执行 “编辑 ”/“ 上 站 选 参数 ”命令 ， 然 后 在 “常规 ”类 列 中 的 “编辑 选 
项 ”下 确保 取消 选中 “标题 后 切换 到 普通 段落”， 如 图 4-13 上 所 示 。 


闵 档 选项 : [ 罗 显 示 欢 迎 屏幕 G) 
回 自动 时 重新 打开 文档 外) 
打开 只 读 文 件 时 警 肯 用 户 向) 
局 用 相关 文件 C) 
搜索 动态 相关 文件 加 ): | 手动 区 
移动 文件 时 更 新 链接 已 ): | 提示 芯 
插入 对 象 时 显示 对 话 框 部) 
允许 邓 字 节 内 联 输入 全) 
在 汪 区 轨 中 预览 取消 选中 这 一 项 
站 点 多 证 多 个 连续 的 空格 出) 
字体 加 用 《strong> 和 “em> 代替 人 > 和 《i>0) 
网 在 《p> 或 th1 盖 46> 标签 中 放置 可 编辑 区 域 时 发 出 警 肯 
历史 步骤 最 多 次 数 00: |50 
拼写 字典 (0) | 


CR 


图 4-13 ”参数 设置 对 话 框 


知 要 搬入 换行 符 ， 可 以 执行 以 下 操作 之 一 : 

单 击 “ 文 本 ”面板 中 按钮 吧 。 

执行 “插入 ”/“HTML”/“ 特 殊 字 符 ”/“ 换 行 符 ” 命 令 。 

按 Shift + Enter 组 合 键 。 

在 代码 视图 中 相应 位 置 输入 HTML 标记 <br> 。 

在 浏览 器 视图 中 ， 用 插入 换行 符 换 行 和 直接 按 Enter 键 换行 的 区 别 如 图 4-14 所 示 。 

3. 不 间断 空格 在 Dreamweaver 中 ， 如 果 使 用 键盘 上 的 Space 键 在 文档 中 添加 空格 ， 
会 发 现 只 能 插入 一 个 空格 ， 即 使 多 次 按 下 Space 键 也 无 济 于 事 ， 同 时 在 代码 视图 中 也 没有 
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相应 的 HTML 标 签 。 默 认 情 况 下 ，Dreamweaver CS6 内 人 允许 字 衍 之 间 包 含 一 个 空格 。 若 要 
在 两 个 字符 之 间 诺 加 多 上 宇 格 ， 必须 插入 不 间断 空格 。 


= ured (NM) G9 
| ti 简 辣 癌 
天 党 的 普 色 在 精 城 r 
正堂 的 晤 鱼 上 在 精 睫 
知道 和 妓 ， 星 从 吕 碧 碧 、 李 元 等 大 师 的 妇 片 到 里 : Ei 
下 次 相 人 入 自 己 的 良 铺 。 世 上 真有 这 么 美丽 的 地 方 码 : 千 逢 性 卉 ， 是 从 中 持 球 ， 才 元 等 太 是 的 岂 片 玉里。 
那 一 定 是 大 印 们 拍 则 好 ， 我 既 常 这 委 告 于 自 己 。 到 
担当 鼻 边 一 个 又 一 个 的 朋友 玫 站 阅 福 的 眼神 从 粮 城 回来 时 ， : 汗 航 由 悄 自 己 的 眼 韦 ， 世 上 削 有 该 之 敌 丽 的 志方 吗 1 
我 的 心 被 税 底 的 挑动 起 来 。 那 是 怎样 的 一 个 地 方 ? 
下 基本、 ra ~ . rh Pte ; 至 一 定 是 克 是 们 拍 检 好 ， 我 经常 和 这 让 告 异 自 已。 


塌 去 过 四 川 阿 圳 、 走 过 川 若 线 ， 洱 荔 喘 这 一 个 见 一 个 的 朋友 复 看 尝 祖 的 职 神 从 四 二 回采 时 ， 


必 独 没有 去 过 位 于 川西 南 革 孜 州 的 稻 起 县 ， 

玲 证 那里 就 是 真正 的 全 说 中 的 - 理 格 里 拉 " 滁 的 心 共和 祝 甘 的 掩 动 旦 杰 。 陡 旺 怎 性 的 一 沾 霹 方 ? 
浇 暂 种 种 的 疑问 ， 我 终于 也 上 禾 了 址 的 心 被 税 庄 的 掩 冯 起 幸 。 屠 是 厂 翌 的 一 个 志方 
过 进 了 帮 块 传说 是 神 外 居住 的 她 方 ， 证 了 二 十 讨 = 

去 寻找 天 登 的 颜色 。 法 过 西 枚 . 去 过 青衣 去 过 甘 商 。， 去 过 博 回 站。 


> 渔 志 过 四 川 阿 规 ， 于 过 | 川 柄 幅 ， 
od) (Nv) 全 NDA Ja -ar 3 未 GT ET [有 


图 4-14 ”不同 换行 方式 在 浏览 费 视 图 中 的 显示 


各 要 在 网 页 中 插入 不 间断 空格 ， 请 执行 下 列 操作 之 一 : 

单 击 “文本 ”面板 中 特殊 字符 下 拉 菜 单 中 的 插入 空格 按钮 机 ， 此 时 会 弹出 一 个 提示 对 
话 框 ,提示 用 户 特 殊 字 从 可 能 在 某 些 浏 喉舌 中 无 法 显示 。 夺 选中 “以 后 不 再 显示 ” 复 选 框 ， 
则 下 次 插入 非 间 断 空 格 时 不 再 出 现 此 对 话 框 。 

执行 “插入 ”/“HTML”/“ 特 殊 字 符 ”/“ 不 换行 空格 ”命令 。 

按 Ctrl + Shift + Space 组 合 键 。 

在 代码 视图 中 相应 的 位 置 输入 “&nbsp”。 

在 代码 视图 中 ， 采 用 以 上 几 种 方式 插入 的 非 间断 空格 有 其 相应 的 HIML 标 签 

“Knbsp” 。 

此 外 ， 用 户 可 以 通过 设置 Dreamweaver CS6 的 首选 参数 ， 从 而 可 以 在 文档 中 添加 连续 
空格 。 执 行 “ 编 辑 ”/“ 首 选 参数 ”命令 ， 然 后 在 “第 规 ” 分 类 中 选中 “人 允许 多 个 连续 的 至 
格 ” 复 选 框 ， 如 图 4-15 所 示 。 


钴 
EJ 


六 入选 观 ; 回 ] 昌 示 抱 邢 原 而 品 1 
回 局 动 嘻 重 蓝 行 开 立 特 站 ) 
国 果 天 只 语 广 件 时 警 叔 图 户 而) 
加 局 周 柱 其 六 侦 区 
吾 关 员 砷 搬 关 充 附 画 1 生动 证 


鸣 动 立 忻 四 更 堪 癸 扣 届 ): ) 提示 芝 
访 查 违 珊 ;四 晤 六 寺 香 时 明 东 对 语 并 全 ) 

园 苇 硅 强 于 村 二 联 铺 六 癌 ) 

国生 是 后 切 所 到 二 通 入 租 心 ) 

亲 


砚 吕 过 要 景 此 小 骸 让 1，/ 细 
属 写 下山 襄 i 地 


Ci CC 


图 4-15 “首选 参数 ”对 话 框 
4.2 在 网 页 中 应 用 图 像 


图 像 古 网 页 中 最 主要 有 的 元 取 之 一 ， 图 形 的 出 现 打 破 了 网 页 初期 单纯 的 文字 界面， 也 市 
来 了 狐 的 直观 表现 形式 。 图 像 不 仅 可 以 修饰 网 页 ， 使 网 页 美观 ， 而 且 与 文本 相 比 ， 一 幅 合 
适 的 图 片 能 够 更 直观 地 说 明 问 题 ， 使 表达 的 意思 一 目 了 然 。 在 很 多 网 页 中 ， 图 像 占据 了 睾 
要 页 面 ， 有 的 其 全 是 全 部 页 面 。 
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DreamREGREEC56 中 文 上 县 入 门 与 提高 实例 秆 有 


在 Dreamweaver CS6 文 档 中 ， 图 厂 不 仪 可 以 下 接 放 在 页 面 上 ， 也 可 以 放 在 表格 、 表 单 
以 及 AP 元 素 中 。 在 插入 图 片 之 后 ， 用 户 可 以 直接 对 图 片 做 一 些 修改 , 例如; 为 图 片 添加 链 
接 、 给 图 片 加 上 一 个 边框 、 改 变 图 厂 的 尺寸 、 设 定 图 片 对 齐 方 式 。 还 可 以 通过 使 用 
Dreamweaver 的 行为 创建 翻转 图 片 或 图 片 地 图 等 交互 式 图 厂 。 


4.2.1 网 页 中 可 以 使 用 的 图 像 格式 


图 像 文 件 有 多 种 格式 ， 但 Web 页 面 中 通常 使 用 的 只 有 三 种 : 

GIF (图 形 交 换 格 式 ) ”文件 最 多 使 用 256 种 颜色 ， 最 适合 显示 色调 不 连续 或 具有 大 
面积 单一 颜色 的 图 像 , 例如 叶 航 条、 按钮、 图标、 徽标 或 其 他 具有 统一 色彩 和 色调 的 图 像 。 

JPEG( 联 合 图 像 专家 组 标准 ) ”该 文件 格式 可 以 包含 数 百 万 种 凑 色 ， 主 要 用 于 摄影 或 
连续 色调 图 像 的 局 级 格式 。 随 看 JPEG 文件 品质 的 提高 ， 图 片 文件 的 大 小 和 下 载 时 间 也 会 
随 乙 增加 。 通 种 可 以 通过 压缩 JPEG 文件 在 图 像 品质 和 文件 大 小 之 间 达 到 民 好 的 平衡 。 

PNG( 可 移植 网 络 图 形 ) 这 种 文件 格式 是 一 种 蔡 代 GIF 格式 的 无 专利 权限 制 的 格式 ， 
它 包括 对 索引 色 、 灰 上 度 、 丰 彩色 图 像 以 及 alpha 通道 透明 的 文 持 。 


4.2.2 插入 水 平 线 


在 对 页 面 内 容 分 栏 时 ， 常 会 使 用 水 平 线 作为 分 界线 ， 本 书 将 水 平 线 作 为 图 像 的 一 种 进 
行 介绍 。 在 Dreamweaver 中 可 以 很 便捷 地 插入 水 平 线 。 
01 将 插入 点 放 在 文档 中 需要 水 平 线 的 位 置 ， 本 例 在 图 4-16 中 “春日 ”的 上 方 。 
02 单 击 “ 搬 入 ”/“HTML”/ “水 平 线 ” 沫 单 命令 ， 即 可 在 光标 处 插入 一 条 水 平 线 。 
0 忆 在 属性 面板 中 ， 设 置 水 平 线 的 宽度 和 高 度 ， 最 终 效果 如 岁 4-17 所 示 。 


图 4-16 ”插入 水 平 线 前 的 效 来 图 4-17 ”插入 水 平 线 后 的 效果 


4. 2.3 ”插入 图 像 


在 网 页 中 ,图 像 通 党 用 于 添加 图 形 界面 (例如 导航 按钮 )、 上 共有 视觉 感染 力 的 内 容 ( 例 
如 照片 ) 或 交互 式 设计 元 素 〈( 例 如 限 标 经 过 图 像 或 图 像 地 图 〉。 

在 Dreamweaver 文 件 中 插入 网 片 时 ，Dreamweaver 会 目 动 在 网 页 的 HTML 源 代码 中 生成 
对 该 图 像 文 件 的 引用 。 为 了 保证 引用 的 正确 性 ， 该 图 片 文 件 必须 保存 在 当前 站 点 目录 中 。 
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如 果 所 用 的 图 片 不 在 当前 站 点 目录 中 上 Dieamweavef 将 提示 用 户 创建 文档 相对 路 径 。 
下 和 而 通过 一 个 在 网 页 中 插入 图 片 和 文学 的 示例 ， 让 读者 了 解 插 入 图 厂 的 具体 步骤 

01 9 狐 建 一 个 文档 ， 单 击 “ 设 计 ” 按 钮 切换 到 设计 视 岁 。 

02 执行 “插入 ”/“ 图 像 ” 命 令 ， 或 单 击 “常用 ”面板 上 的 图 :按钮 ， 弹 出 “选择 
图 像 源 文件 ”对 话 框 。 

03 在 “选择 图 像 源 文件 ”对 话 框 中 选择 所 要 插入 网 像 的 路 径 ， 或 者 直接 在 URL 中 
输入 所 要 插入 图 像 的 路 径 ， 此 时 可 以 看 到 图 像 的 预览 效果 。 

在 该 对 话 框 中 ， 选 中 “文件 系统 ”可 以 选择 一 个 图 形 文 件 ， 选 中 “数据 源 ” 可 以 选择 
一 个 动态 图 像 源 。 蛙 击 “ 站 点 和 服务 器 ”可 以 从 Web 站 点 中 选择 图 像 文 件 。 

04 选 定 图 像 后 , 单 击 “ 人 确定 ”按钮 。 如果 选中 的 图 像 文 件 没有 保存 , 那么 Dreamweaver 
会 弹出 一 个 对 话 框 ， 提 示 用 户 先 保存 文档 。 

05) 单 击 “ 确 定 ” 按 钮 ， 此 时 将 显示 “图 像 标签 辅 助 功能 属性 ”对 话 框 ， 在 “替代 文 
本 ”和 “详细 描述 ”文本 框 中 输入 值 ， 然 后 单 击 “确定 ”。 该 图 像 即 可 插入 文档 中 ，。 

06 有 在 属性 面板 上 单 击 |__ 晤 辐 直 按钮 ， 在 弹出 的 “新 建 CSS 规 则 ”对 话 框 中 设 
首选 择 需 类 型 为 ID， 然 后 输入 选择 毁 名 称 贞 mgstyle。 此 选择 右 名 称 将 规则 应 用 于 所 有 ID 
为 “imgstyle” 的 HTML SR 单 击 “ 确 定 ” 按 钮 ， 在 弹出 的 规则 定义 对 话 框 中 设置 边框 
为 6pX， 凑 色 为 扣 00， 凑 型 为 Solid。 

07 ee “但 愿 人 长 久 ， 干 里 共 婵 娟 ”， 然后 在 属性 面板 上 单 击 

二 辣 志 按钮 ， 在 弹出 的 “新 建 CSS 规 则 ”对 话 框 中 设置 选择 器 类 型 为 “类 ”， 选 择 
器 名 称 为 .fontstyle0， 单 击 “ 人 确定 ”按钮 ， 在 弹出 的 规则 定义 对 话 框 中 设置 文本 字体 为 “ 华 
文 行 覆 ”、 大 小 为 24， 颜 色 为 扯 30， 切 换 到 “区 块 ” 分 类 ， 设 置 文本 对 齐 方式 为 抽 中 。 

08 选中 文字 和 图 片 ， 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 .fontstyle0。 保 

和 存 文 件 ， 并 用 浏览 右 打 开 文 件 ， 即 可 得 到 图 4-18 所 示 的 效果 。 


恒 居 A 是 训 .和 开 里 革 屋 赠 


图 4-18 ”插入 图 像 与 文本 的 效果 


4.2.4 插入 图 像 占 位 符 


图 像 占 位 符 是 在 将 最 终 图 形 添加 到 Web 页 面 之 前 使 用 的 临时 图 形 。 图 像 占 位 符 不 在 
浏览 占 中 显示 ， 在 对 Web 页 面 进行 布局 时 很 有 用 ， 可 以 帮助 用 户 在 真正 创建 图 像 之 前 确 
定 图 像 在 页 面 上 的 位 置 ， 在 发 布 站 点 之 前 ， 用 做 好 的 图 像 文件 奉 换 所 有 的 图 像 占 位 符 

下面 演示 在 页 面 中 插入 图 像 占 位 符 的 操作 过 程 : 
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DreamnECRERIEC56 中文 版 入 门 与 提高 实例 视 科 


0 位 在 文档 窗口 中 需要 插 六 图 像 吉 位 符 的 位 置 单 击 鼠 标 ,本 例 在 图 4-19 所 示 的 文档 中 
间 。 
” ”L024 选择“ 插入”/“ 图 像 对 象 ”/“ 图 像 占 位 符 ” 来 单 命令 ， 或 单 击 “ 常 用 ”面板 上 
回 - 图 标 右 侧 的 倒 三 角形 ， 在 弹出 的 下 拉 菜 单 中 选择 图 像 占 位 符 吕 =， 弹出 如 图 4-20 所 示 的 
“图 像 占 位 人 符 ” 对 话 框 。 


名 称 : [ | 
a 


me [| 
| 


图 4-19 ”插入 图 像 占 位 符 前 的 效 末 图 4-20 “图 像 占 位 人 符 ” 对 话 框 


03 在 “名 称 ” 文 本 框 中 键入 该 图 像 占 位 符 的 名 称 。 本 例 键入 logo_line。 
.04 在 “宽度 ”文本 框 中 输入 占 位 符 的 宽度 ， 在 “高 度 ” 文 本 框 中 键入 占 位 符 的 高 
度 ， 本 例 分 别 设置 为 550 和 60。 
05j 单 击 颜色 框 ， 并 从 颜色 选择 器 中 选择 一 种 颜色 ， 本 例 选 择 果 绿色 〈#99FF99) 。 
106 有 在 “替换 文本 ”文本 框 中 输入 图 像 在 Web 页 面 上 的 文字 描述 , 本 例 键 入 “logo”。 
奉 换 文本 属于 HTML 代码 ， 不 会 显示 在 页 面 上 上。 对 于 大 多 数 网 像 ， 提 供 蕉 换文 本 是 
很 重要 的 ， 使 用 屏幕 阅读 器 或 只 显示 文本 的 浏览 器 用 户 将 鼠标 移 到 图 像 占 位 符 上 ， 就 可 以 
访问 这 些 图 像 提 供 的 文本 信息 。 
07 9 单 击 “确定 ”按钮 。 即 可 将 图 像 占 位 符 插 入 页 面 指定 的 位 置 。 如 图 4-21 所 示 。 
插入 网 像 占 位 符 后 ， 用 户 可 以 在 属性 面板 中 修改 占 位 符 的 属性 ， 以 满足 设计 需要 。 如 
果 在 计算 机 上 安装 了 Adobe Fireworks， 还 可 以 根据 Dreamweaver 图 像 占 位 符 创 建新 的 图 
形 。 ed oi Te 
月 继续 上 例 。 在 文档 窗口 选中 图 像 占 位 符 
02 在 属性 检查 器 中 单 击 “ 创 建 ” 按 钮 。 
此 时 ， 将 局 动 Fireworks， 并 有 目 动 新 建 一 个 画布 ， 尺 寸 大 小 与 占 位 符 岁 像 相 同 。 
03 在 画布 中 创建 并 编辑 网 像 。 本 例 选择 “文件 ”/“ 寻 入 ”命令 ， 寻 入 一 幅 透 明 GIF 
图 片 ， 并 蕉 换 Dreamweaver 中 的 占 位 从 图像 。 最 终 效 果 如 图 4-22 所 示 。 


下 请 入 的 图 像 扣 位 符 


图 4-21 搬入 图 像 占 位 从 的 效果 图 4-22 ”创建 图 像 的 效果 
02 


区 注意 


2 与 在 “设计 ”视图 中 看 到 的 图 像 占 位 符 不 同 ， 在 浏览 器 中 查看 图 像 占 位 符 
时 ， 不 会 显示 占 位 符 的 名 称 和 大 小 ， 而 只 显示 点 位 符 的 替换 文本 。 


4.2.5 设置 图 像 属 性 


将 图 像 插 入 文档 之 后 ，Dreamweaver 会 目 动 按照 图 像 的 大 小 显示 ， 但 在 实际 设计 中 ， 
往往 需要 对 图 像 的 一 些 属性 进行 调整 ， 如 大 小 、 边 框 、 位 置 、 对 齐 等 等 。 这 些 操作 可 以 通 
过 图 4-23 所 示 的 图 像 属 性 控制 面板 得 以 实现 。 


尾 性 

小， 图 像 ，322kK 源 交 件 6) [s/040908fruit01. jp 引 锚 | 回 车 换 C) | Y 宽 W) |1600 | [px 同上 记 类 (C) | 无 v| 
吊 ID 链接) 图 日 给 站 下 这 区 和 人 高 [0 [i200 |[zx VI yr 
地 图 om | 目标 (R) 
RE 原始 久 口 


图 4-23 图 像 的 属性 设置 面板 


下 面 和 涂 要 介绍 各 个 属性 参数 的 功能 和 用 法 。 

“ID”: 图 像 名 称 。 在 使 用 Dreamweaver 行为 或 脚本 撰写 语言 (例如 JavaScript 或 
VBScript) 时 可 以 利用 该 名 称 引 用 该 图 像 。 

“ 宽 ”、“ 高 ”: 分 别 用 于 设置 图 像 的 宽度 和 高 度 ， 单 位 为 像素 。 

此 外 ， 还 可 以 直接 通过 鼠标 拖 动 来 改变 图 像 的 大 小 。 首 先 在 “文档 ”窗口 中 选择 一 个 
图 像 。 图 像 的 底部 、 石 侧 及 右 下 角 出 现 调 整 手 顶 。 然 后 执行 下 列 操 作 调 整 图像 的 大 小 : 拖 
动 右 侧 的 控制 点 调整 网 像 的 宽度 ; 拖 动 底部 的 控制 点 调整 图 像 的 高 度 ; 拖 动 抵 角 的 控制 点 
癌 时 调整 图 像 的 宽度 和 局 度 。 

按 住 Shift 键 的 同时 用 鼠标 拖 动 确 角 的 控制 点 ， 可 以 按 比 例 缩放 网 像 。 默 认 情 况 下 ， 
“ 宽 ” 和 “高 ” 右 侧 显示 “切换 尺寸 约束 ”按钮 得 ,修改 其 中 一 个 值 ， 另 一 个 值 将 约束 比 
例 缩放 。 单 击 该 按钮 ， 图 标 变 为 血 ， 即 取消 约束 比例 ， 此 时 可 以 单独 修改 图 片 的 宽 或 高 。 

以 可 视 方 式 最 小 可 以 将 元 素 大 小 调整 到 8x8 像 素 。 知 要 将 元 素 的 宽度 和 高 上 度 调整 到 更 
小 《例如 1 x 1 像素 ) ， 则 要 在 属性 面板 的 “ 宽 ” 和 “高 ”中 设置 。 

修改 图 像 的 “ 宽 ” 和 “高 ”以 后 ， 该 文本 框 右 侧 将 显示 “ 重 置 为 原始 大 小 ”按钮 入， 
藻 要 将 已 调整 大 小 的 元 素 返 回 到 原始 尺寸 ， 可 以 在 属性 检查 费 中 删除 “ 完 ” 和 “高 ” 域 中 
的 值 ， 或 者 单 击 “ 重 设 大 小 ”按钮 总。 若 要 保留 修改 设置 ， 可 以 单 击 “ 提 交 图 像 大 小 ” 按 
钮 0。 

“ 源 文件 ”: 用 于 设置 图 像 源 文件 的 名 称 。 

“链接 ”: 用 于 设置 图 像 链接 的 网 页 文件 的 地 址 。 

“ 蔡 换 ”: 用 于 设置 图 像 的 说 明 性 内 容 ， 可 以 作为 图 像 的 设计 提示 文本 。 

“类 ”: 用 于 设置 应 用 到 图 像 的 CSS 样式 的 名 称 。 

允 : 启动 在 “文件 类 型 /编辑 器 ”首选 参数 中 指定 的 图 像 编 辑 器 ， 并 打开 选 定 的 图 像 。 

三 .打开 “图 像 优 化 ”对 话 框 ， 优 化 图 像 。 

Dreamweaver CS6 简 化 了 PSD 优 化 流程 。 以 前 版 本 中 的 “图 像 预 览 ” 对 话 框 修改 为 “图 
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像 优 化 ”对 话 框 。 当 更 改 “ 图 和 橡 优化 ”对 话 框 中 的 设置 时 ，“ 设 计 ” 视 图 中 会 实时 显示 图 
像 的 预览 。 

到 : 用 于 修剪 图 片 ， 删 去 图 片 中 不 需要 的 部 分 。 

又 ,重新 取样 。 当 图 片 被 调整 大 小 后 此 按钮 可 用 。 用 于 向 调整 大 小 后 的 图 片 里 增加 或 
减少 像素 以 提高 图 片 质量 。 

但， 用 于 改变 图 片 亮度 和 对 比 度 。 

岂 : 用 于 改变 图 片 内 部 边缘 对 比 度 。 


vy 注意 : 
式 。 其 他 图 像 文 件 格式 不 能 使 用 这 些 图 像 编 辑 功 能 进行 编辑 。 
RR 门 中 ， 用 于 制作 映射 图 。 有 关上 映射 图 的 说 明 及 制作 方法 ， 将 在 本 书 下 章 介 绍 。 


Dreamweaver CS6 的 图 像 编辑 功能 仅 适 用 于 JPEG 和 GIF 图 像 文 件 格 


4.2.6 设置 外 部 编辑 器 


在 网 页 制作 过 程 中 ， 可 能 种 第 需要 编辑 网 页 中 的 网 像 ， 以 满足 特定 的 设计 需要 。 使 用 
Dreamweaver CS6 的 “首选 参数 ”对 话 框 设 定 首选 图像 编辑 器 可 以 提高 整个 工作 过 程 的 效 
率 。 议 置 首 选 图 像 编辑 器 可 以 让 读者 在 使 用 Dreamweaver 的 同时 局 用 指定 的 编辑 器 修改 编 
辑 图 像 。 其 步 又 如 下 : 

(1) 执行 “编辑 ”/“ 使 用 外 部 编辑 占 编 辑 ” 采 蛙 命 令 ， 即 可 打开 图 4-24 所 示 的 “ 肯 
选 参 数 ” 对 话 框 。 

(2) 在 “扩展 名 ”列表 中 ， 选 择 要 设置 编辑 器 的 文件 类 型 后 级 名 。 如 果 在 扩展 名 一 
栏 中 没有 发 现 需要 的 后 缀 名 ， 可 以 单 击 列表 顶部 的 寺 , 按 钮 ， 然 后 在 “扩展 名 ”列表 中 出 现 
的 空 柱 中 输入 所 需 的 后 级 即 可 。 

(3) 单 击 “ 编 辑 右 ”列表 上 方 的 灿 按钮 ， 会 弹出 “选择 外 部 编辑 器 ”对 话 框 ， 从 中 
浏览 选择 押 需 的 外 部 编辑 器 。 


文件 类 型 编辑 器 
在 代码 视图 中 打开 (0): .js .asa .css .lnc .txt .as .asc .asr taccess tpassw 


外 部 代码 编辑 器 EF) :| 
重 载 修改 过 的 文件 R): [提示 区 
运行 时 先 保存 文件 (5): | 提示 区 
i Fireworks (F): IC:\Froeram Files\hdobe\hdobe Fireworks CSBNF| 
辅助 功 月 
文件 tt 较 ” HE 号 设 为 主要 人 ) 


全 | 编辑 器 
在 训 昂 器 中 预览 
站 点 
字体 


图 4-24 ”设置 外 部 编辑 需 
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(4) 单 击 [ 设 为 主要 员 | 按钮 ， 可 将 所 选编 辑 器 设置 为 指定 类 型 图 像 的 主要 编辑 器 。 

进行 上 述 设置 后 ， 在 Dreamweaver 的 文档 窗口 中 选择 需要 编辑 的 图 像 文件 ， 然 后 单 击 
属性 面板 中 的 “编辑 ”按钮 多， 就 可 以 打开 指定 的 编辑 器 对 其 进行 编辑 操作 。 在 编辑 器 中 
修改 图 片 之 后 ， 只 需要 简单 地 单 击 属性 面板 上 的 刷新 图 标 ， 就 可 以 自动 更 新 Dreamweaver 
中 的 图 片 文件 了 。 


4.2.7 插入 鼠标 经 过 图 像 


所 谓 鼠 标 经 过 图 像 ， 就 是 当 鼠 标 移 动 到 图 像 上 面 时 ， 切 换 成 另 一 幅 图 像 ， 同 时 可 以 通 
过 单 击 该 图 像 ， 打 开 链 接 的 网 页 。 

一 个 鼠标 经 过 图 像 其 实 是 由 两 张 图 片 组 成 的 ， 页面 显示 的 图 像 和 和 鼠标 经 过 时 的 图 像 。 
这 两 张 图 片 应 具有 相同 的 尺寸 ， 如 果 两 张 图 片 的 尺寸 不 同 ，Dreamweaver CS6 会 自动 将 第 
二 张 图 片 的 尺寸 调整 成 第 一 张 图 片 的 尺寸 。 

下 面 通 过 创建 一 个 鼠标 经 过 图 像 ， 向 读者 演示 创建 鼠标 经 过 图 像 的 操作 步骤 。 

01 间 在 文档 窗口 中 ， 将 光标 置 于 要 插入 鼠标 经 过 图 像 的 地 方 。 

02 执行 “插入 ”/“ 图 像 对 象 ”/“ 上 鼠标 经 过 图 像 ”命令 ， 或 单 击 “ 插 入 ”/“ 常 用 ” 
面板 上 的 图 ~ 下拉 第 头 , 弹出 图 4-25 所 示 的 下 拉 菜 单 , 在 弹出 菜单 中 单 击 “鼠标 经 过 图 像 ”， 


此 时 会 弹出 “插入 鼠标 经 过 图 像 ” 对 话 框 ， 如 图 4-26 所 示 。 


插入 鼠标 经 过 图 确 


图 像 名 称 : [Inage 
| 加 | 图 你 原始 图 像 : 
| 
辕 ] 图 像 占 位 符 眼 标 经 过 图 像 : 
国 服 标 经 过 限 人 预 载 丑 标 经 过 图 远 
区 Fireworks HIML 蔡 换 娘 本 : 


刘 绘制 桶 圆 热点 
这 蛤 制 多 过 形 热点 


图 4-25 ”插入 图 像 某 单 图 4-26 ”插入 翻转 图 像 对 话 框 


03 在 “图 像 名 称 ” 栏 中 输入 限 标 经 过 图 像 的 名 称 。 

04 在 “原始 图 像 ” 栏 中 输入 初始 图 像 的 路 笃 ， 或 者 单 击 “ 浏 览 ” 按 钮 ， 从 弹出 的 
对 话 框 中 浏览 选择 所 融 图 像 文件 。 

05 9 在 “也 标 经 过 图 像 ” 栏 中 输入 鼠标 经 过 时 要 显示 的 图 像 的 路 径 ， 或 者 蛙 击 “ 浏 
号 ” 按 钮 ， 从 弹出 的 对 话 框 中 浏览 选择 图 像 文件 。 

06 选中 “ 预 载 鼠标 经 过 图 像 ” 复 选 枉 ， 这 样 可 以 让 图 片 预先 加 载 到 浏览 器 的 缓存 
中 ， 加 快 图 片 的 下 载 速度 。 

07 朋 在 “ 蔡 换 文本 ”文本 框 中 输入 与 图 像 交 蔡 的 文本 。 在 浏览 右 浏 览 该 网 页 ， 当 光 
标 拆 过 网 像 时 ， 融 会 显示 这 些 文本 。 

08 在 “ 按 下 时 ， 前 往 的 URL” 文 本 框 中 输入 链接 的 文件 路 径 及 文件 名 ， 表 示 在 浏 
览 时 单 击 鼠 标 经 过 图 像 ， 会 打开 链接 的 网 页 。 也 可 通过 单 击 右边 的 “浏览 ”按钮 ， 从 弹出 
的 文件 选择 窗口 中 选择 合适 的 文件 。 
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09 9 单 击 “ 确 定 ” 按 包 ， 并 保存 文件 。 然 局 按 下 F12 键 查看 效果 ， 如 图 4-27 所 示 。 当 
光标 没有 移 到 图 像 上 时 ， 显 示 左 边 的 图 ， 当 将 光标 移 到 图 片上 时 ， 显 示 右 边 的 图 ; 移 开 光 
标 ， 则 又 显示 左边 的 图 片 。 


图 4-27 ”光标 经 过 前 后 的 图 像 效 果 


4.2.8 导入 Fireworks HTML 


Fireworks 是 国内 比较 流行 的 Web 图 形 处 理 软件 ， 与 Dreamweaver 能 够 高 度 整 合 。 在 
Fireworks 中 可 以 将 创建 的 分 割 图 像 、 热 点 图 像 、 翻 转 网 像 以 及 相应 的 链接 和 脚本 导出 ， 同 
时 产生 相应 的 HITML 人 代码 及 图 像 。 这 些 HTML 代 但 可 以 轻松 地 导入 到 Dreamweaver 中 ， 以 便 
让 Dreamweaver 结 合 其 他 功能 进行 总 体 规划 并 开发 网 站 。 

下 面 汗 示 导 入 Fireworks HTML 的 方法 和 步 又 。 

01 打开 Fireworks 软 件 ， 在 Fireworks 中 创建 一 组 切记 图像。 具体 创建 方法 请 参考 
Fireworks 相 关 书 籍 。 切 请 赂 像 如 网 4-28 所 示 。 

02 在 Fireworks 中 ， 选 择 “ 文 件 ”/“ 导 出 ”命令 , 设置 寻 出 类 型 为 “HTML 和 图 像 ”。 

03 返回 到 Dreamweaver 文 档 窗口 ， 选 择 “ 插 入 ”/“ 图 像 对 象 ”/“Fireworks HTML” 
菜单 命令 ， 打 开 “ 插 入 Fireworks HTML” 对 话 框 ， 如 图 4-29 所 示 。 


05 如 果 希 望 将 Fireworks HTML 代码 导入 到 Dreamweaver 之 后 ， 删 除 Fireworks 文 件 ， 
则 选中 “ 搬入 后 市 除 文件 ” 复 选 框 。 

06 单 击 ， 确定 ”按钮 导入 指定 的 Fireworks HTML 代 码 。 导 入 后 的 页 面 预览 效果 
如 图 4-30 所 示 。 


二 入 Fireworks HIRIL 


Fireworks HTML 识 件 : | 


选项 ，[_] 插入 后 删除 文件 


图 4-28 ”Fireworks 中 设计 的 切片 图 像 图 4-29 “插入 Fireworks HTML” 对 话 框 
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图 4-30 “导入 的 Fireworks HTML 文件 


4.3 实例 制作 之 捅 入 日 期 时 间 


在 本 例 的 导航 栏 中 ， 浏 览 者 可 以 实时 得 看 当前 的 日 期 、 星 期 及 时 间 ， 且 目 动 更 新 。 效 
果 如 图 4-31 所 示 。 


图 4-31 日 期 时 间 显 示 效 过 


制作 步骤 如 下 : 
019 新 建 一 个 HTML 文档。 
02 用 单 击 “ 插 入 ” 栏 上 的 表格 图 标 按钮 图 ， 打 开 “ 表 格 ” 对 话 框 。 在 页 面 中 插入 一 
个 两 行 一 列 、 宽 度 为 200 像 素 、 边 框 为 0 的 表格 。 
其 中 ， 第 一 行 用 于 放置 导航 栏 的 图 标 和 日 期 时 间 ， 第 二 行 用 于 放置 具体 的 导航 项 目 。 
在 接 下 来 的 步 怠 中， 为 单元 格 设 置 背 景 图 像 。 上 日 Dreamweaver CS4 开 始 ， 在 单元 格 的 
属性 面板 中 己 找 不 到 “背景 图 像 ” 选 项 了 。 如 果 要 设置 表格 或 单元 格 的 背景 图 像 ， 需 要 使 
用 CSS 样 式 进行 定义 。 | 
03 和 将 光标 置 于 第 一 行 第 一 列 的 单元 格 中 ， 然 后 单 击 其 属性 面板 左上 角 的 | 旧 555 控 
钮 ， 在 “目标 规则 ”下 拉 列 表 中 选择 “新 CSS 规 则 ”， 并 单 击 “ 编 辑 规则 ”按钮 打开 “新 
建 CSS 规 则 对 话 框 ”。 
04 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “类 ”， 在 “选择 器 名 称 ” 中 键入 类 名 称 ， 
例如 .backgroundl1，“ 规 则 定义 ”选择 “ 仪 限 该 文档 ”。 人 然后 时 击 “ 人 确定 ”按钮 打开 图 4-32 
所 示 的 规则 定义 对 话 框 。 
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趟 融 是 导 灶 出 序 ” 妇 bp 波 


-backgroundl 的 C55 规则 定 浆 


NE 
类 


类 型 


| 


Font-family (F): | 加 图 
Font-size (3): 本 Font-weightt): YY 
Font-style (T): Font-variant mW: 司 
Line-heieht (I): | _ 国 | px Text-transform | 司 
Text-decoration MD): underline (W) colorC) :I | 


各 :网 
出 而 条 六 


列表 
定位 
扩展 
过 遮 


图 4-32 ”规则 定义 对 话 杠 


05 有 在 对 话 框 左 侧 的 “分 类 ”列表 中 选择 “背景 ”， 然 后 单 击 “ 背 景 图 像 ” 右 侧 的 “ 浏 
览 ” 按 钮 ， 在 弹出 的 资源 对 话 框 中 选择 喜欢 的 背景 图 片 ， 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

06 在 单元 格 属性 面板 上 调整 单元 格 的 高 度 。 此 时 的 页 面 效果 如 图 4-33 所 示 。 

0 个 选中 第 一 行 的 单元 格 ， 在 属性 面板 的 “水 平 ” 下 拉 列 表 中 选择 “居中 对 齐 ”。 

0 引 单 击 “ 插 入 ” 栏 上 的 图 像 按 钮 图 3， 打开 “选择 图 像 源 文件 ”对 话 框 。 选 择 已 在 
图 像 编辑 软件 中 制作 好 的 图 标 ， 然 后 单 击 “ 确 定 ” 投 钮 ， 将 其 插入 到 单元 格 中 。 此 时 的 页 
面 效果 如 图 4-34 所 示 。 


图 4-33 ”插入 两 行 一 列 的 表格 图 4-34 ”插入 导航 图 标 

09 朋 将 光标 停留 在 插入 的 图 片 后 ， 然 后 按 下 Shift 键 的 同时 按 下 Enter 键 ， 在 单元 格 中 
插入 一 个 软 回 车 。 加 

10 肌 单 击 “ 插 入 ” 栏 上 的 “日 期 ”按钮 加 ， 打 开 “ 插 入 日 期 ”对 话 框 。 

411 在 “星期 格式 ”下 拉 列 表 中 选择 “Thursday”; “日 期 格式 ”选择 “1974-03-04”; 
“时 间 格 式 ” 选 择 “10: 18 PM”; 然后 选中 “储存 时 自动 更 新 ” 复 选 框 。 


12 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 即 可 在 页 面 中 插入 日 期 、 星 期 及 时 间 ， 效 果 见 
图 4-31。 
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DrecnERERTLSS 中 立 版 信 门 与 提高 实例 条 


《人 
5.1 认识 超级 链接 


超级 链接 由 两 部 分 组 成 , 一 部 分 是 在 浏览 部 分 ， 称 为 超级 链接 载体 ， 
为 一 部 分 古 所 链接 的 目标 。 在 浏览 页 面 时 ， 单 击 超级 链接 载体 将 会 打开 链接 目标 。 超 级 链 
接 载 体 可 以 是 文本 、 图 像 ， 链接 的 目标 可 以 是 网 页 、 图 刻 、 视 频 或 声音 和 电子 邮件 地 址 等 。 
例如 : 单 击 图 5-1 所 示 的 产品 图 片 或 产品 名 称 ， 可 以 打开 图 5-2 所 示 的 产品 详细 介绍 页 面 。 


量 要 其 注 岳 100 雷 评论 YY 。 
。 时 城 于 包 炉 过 沾 玫 姑且 各 
这 个 生肖 靶子 主打 酒 联 
po *。 这 个 至 可 骂 子 主打 酒 灶 本 
并 本 伸 己 得 员 ”这 个 至 着 教子 主打 渚 新闻 
per 


Li 


| 将 鼠标 称 到 产品 名 称 上 


上 ;指针 也 会 变 成 手 形 ， 
表明 信也 是 一 个 超 颖 链 


， 苯 间 还 果 要 冯 现 挤 导 立 量 的 护 肝 晶 二 和 
”本 的 正业 上 ia 
和 MF Ts 
， 哪 十 请 予 的 各 白垩 好 用 ? 
赤 清 性 虎 肝 困 生 之 化 交 品 时 : 崇 昌 裔 油渍 迪 下 


图 5-1 早 击 超级 链接 的 载体 
欧 舒 丹 /L? 0ccitane 均 花 味 闪 亮 润 肤 者 化 妆 品 品牌 专区 


产品 名 称 : 埋 花 味 亲 亮 润 肤 旺 国内 化 妆 品 品牌 欧美 化 妆 品 品牌 
品牌 名 称 : 欧 千 丹 L'Occitane [欧美 化 妆 品 品牌 ] 

: 护 体 一 止 汗 香 体 

= 其 他 化 妆 品 品牌 全 部 化 妆 品 品牌 


日 本 化 妆 品 品牌 韩国 化 妆 品 品牌 


: ¥245 
: 加 入 收藏 夹 斌 


欧 每 丹 接 花 味 办 亮 润 肤 露 产品 介绍 : 
能 有 效 谷 组 与 滋润 肌肤 , 同时 让 肌肤 有 些 级 般 光 滑 的 名 感 。 


<qp， 网 友 对 7 欧 舒 丹 稳 花 味 闪 亮 润 肤 圳 ”化妆 品 的 评论 (1 条 ) 平均 得 分 : ”3.00 
第 1 楼 : 妆 网 游客 [2008-12-10 12:57:39] 说 : 
味道 真 的 是 好 好 . . ， [评分 : 窒 遍 视 ] 
味道 真 的 是 好 好 呀 ， 味道 很 清淡 。 其 实 本 来 对 栅 花 的 末 西 不 是 很 喜欢 ， 可 是 包装 术 可 爱 了 * 
172 的 人 帝 得 此 评论 有 用 ， 您 认 汶 : 有 用 ; 没 用 我 也 说 说 


声明 : re ei 的 使 用 心得 均 为 网 友 个 人 之 体验 ， 并 不 代表 妆 网 意见 ， 在 应 用 时 请 
注意 个 人 差别 。 


图 5-2 ”打开 的 链接 目标 


在 这 里 , 产品 图 片 或 产品 名 称 就 是 超 链接 载体 , 而 打开 的 产品 详情 页 面 则 是 链接 目标 。 

网 页 上 的 超级 链接 一 般 有 三 种 : 一 种 是 绝对 网 址 的 超级 链接 ， 例 如 
http://www.tsighua.edu.cn 链 接 到 清华 大 学 的 站 点 主页 ;第 二 种 是 相对 网 址 的 超级 链接 ， 例 
如 将 主页 上 的 几 个 文学 链接 到 本 站 点 有 的 其 他 页 面 上 ; 还 有 一 种 是 同一 个 页 面 的 超级 链接 ， 
也 称 为 销 点 。 

了 解 了 超级 链接 的 基本 概念 和 分 类 之 后 ， 接 下 来 介绍 其 其 体 创建 方法 。 
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5.2 创建、 管理 链接 


在 Dreamweaver CS6 中 创建 超级 链接 有 多 种 方法 ， 创 建 后 ， 用 户 还 可 以 随时 对 链接 载 
体 、 链 接 目 标 和 链接 的 打开 方式 进行 修改 。 此 外 还 可 以 通过 URL 耐 板 统 一 管理 网 站 中 的 所 
有 超级 链接 。 


5.2.1 创建 文本 超级 链接 


在 网 员 上 用 到 最 多 的 是 就 是 文本 超级 链接 ， 例 如 单 击 文本 ， 跳 园 到 另 一 个 页 面 。 创 建 
文本 超级 链接 的 方法 很 多 ， 下 面 通过 一 个 稍 单 示例 进行 说 明 。 
01 在 文档 窗口 中 选中 需要 建立 链接 的 文本 。 例如 页 面 上 的 http://www.sina.com.cn。 
在 一 般 的 情况 下 ， 创 建 超级 链接 是 通过 在 属性 面板 的 “链接 ”文本 框 中 完成 的 。 
02 9 选择 “窗口 ”/“ 属 性 ”来 蛙 命 令 打 开 属 性 和 面板。 在 “链接 ”后 的 文本 框 中 输入 
链接 目标 ,本 例 输 入 http:/www.sina.com.cn。 
操作 完成 后 ， 可 以 看 到 被 选择 的 文本 变 为 蓝 色 ， 并 且 市 有 下 划 线 。 在 浏览 器 中 将 光标 
标 移 到 文本 上 时 ， 光 标 变 为 手 形 ， 如 图 5-3 所 示 。 


吓 下 人 罩 E re yi Led tet 
慎 乱 旨 暂 视 ， 证 tp sna con cn 


朱 误 名作 和 能 引 


现 书 有 感 痘 日 


疯 书 有 加 


装 丁 广 寺 一 宣 开 


图 5-3 ”超级 链接 效果 

默认 情况 下 ， 文 本 链接 显示 为 监 色 ， 并 加 有 下 划 线 。 用 户 可 以 选择 “修改 ”/“ 页 面 必 
性 ” 亲 单 命令 ， 在 “页 面 属性 ”面板 的 “链接 ”分 类 页 面 设置 超级 链接 在 各 种 状态 下 的 闫 
色 ， 以 及 选择 是 否 显 示 下 划 线 。 

如 果 链 接 日 标 是 计算 机 上 的 一 个 文件 或 图 片 ， 可 以 蛙 击 “链接 ”文本 框 右 侧 的 文件 夹 
图 标 品 ， 打 开 “ 选 择 文件 ”对 话 框 ， 查 找 并 选择 文件 ， 或 者 选择 “指向 文件 ”图 标 和 党 ， 并 
按 下 了 鼠标 左 键 拖 动 到 “文件 ”面板 中 一 个 现存 的 页 面 。 
vy 注意 : 
2 Dreamweaver 不 支持 扩展 字符 集 (也 被 称 为 High ASCII ) ， 所 以 在 指定 链 
接 的 URL 时 , 不 能 包含 扩展 字符 集 ， 且 完全 的 URL 最 多 不 能 超过 255 个 字符 。 此 外 ， 
尽管 大 多 数 浏览 器 可 以 解释 路 径 名 或 URL 中 的 空格 ， 但 在 UNIX 应 用 中 ， 空 格 会 被 
变 为 %20， 这 将 使 得 URL 比较 难看 。 

03 目 在 “目标 ”下 拉 列 表 中 选择 打开 链接 目标 的 方式 。 即 可 创建 超级 链接 。 

此 外 ， 用 户 还 可 以 通过 执行 “插入 ”/“ 超 级 链接 ”于 单 命令 ， 或 直接 单 击 “ 揪 入” 栏 
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“常用 ”面板 下 的 超级 链接 按钮 仿 ， 打 开 “ 超 级 链接 ”对 话 框 设置 选 定 文本 的 超级 链接 。 


5. 2.2 ”创建 图 片 链接 


很 多 情况 下 ， 为 了 去 挥 文本 链接 献 认 的 下 划 线 效果 或 美化 页 面 ， 网 页 设计 者 会 选择 用 
图 片 代 蔡 文本 创建 超级 链接 ， 这 种 方式 适用 于 所 有 能 识别 图 形 的 浏览 右 。 
创建 图 三 链接 的 方法 与 创建 文本 链接 大 任 相 同 ， 不同 之 处 在 于 链接 的 载体 是 图 片 ， 而 
不 是 文本 。 下 面 尖 示 创建 图 厂 链 接 的 步 又 。 
01 选中 需要 创建 链接 的 图 片 一 一 图 5-4 所 示 的 Google 网 徽 。 


选中 要 创建 链接 的 图 片 


了 和风 


新 
NaA.com.cn 0) srwrastsnn 


图 5-4” 选 定 需要 设置 超级 链接 的 图 片 
02 在 属性 和 面板 的 “链接 ”文本 杠 中 键入 超级 链接 的 URL。 本 例 输 
入 http://www.200gle.com.cn。 
03 在“ 符 换 ” 下 拉 列 表 中 键入 “Google”。 在 浏览 器 中 ， 当 该 图 片 没 有 下 载 时 ， 
在 图 片 所 在 位 置 显示 蔡 换 文本 。 
04 在 “目标 ”下 拉 列 表 中 选择 打开 该 网 站 的 方式 ， 本 例 使 用 默认 设置 。 
至 此 ， 图 片 链 接 创 建 完毕 。 用 户 可 以 按 F12 键 在 浏览 器 中 预 宽 。 
使 用 图 厂 链接 时 ， 如 果 在 属性 面板 中 为 图 片 设 置 了 边框 ， 或 边框 值 没 有 明确 地 指定 为 
0， 则 浏览 右 中 的 链接 网 像 通常 显示 一 个 监 色 边框 ， 如 岁 $-5$ 所 示 。 
如 果 不 希 望 显示 该 监 色 边框 ， 可 以 新 建 一 个 CSS 规 则 ， 将 边框 宽度 设置 为 0。 


图 5-5 ”设置 了 边框 的 图 亡 链 接 


5.2.3 链接 到 命名 锚 点 


通 利 情况 下 ， 当 使 用 绝对 地 址 或 相对 地 址 链接 到 一 个 Web 页 面 时 ， 浏 览 右 都 会 重新 载 
入 并 显示 这 个 页 面 。 如 果 网 页 的 内 容 比 较 多 ， 浏 蚁 者 就 必须 通过 深 动 方式 来 全 看 当前 屏 大 
以 下 的 信息 。 使 用 命名 锚 氮 则 可 以 立即 啊 应 浏览 者 单 击 锁 点 的 事件 ， 由 于 整个 页 面 已 被 载 
入 ， 所 以 浏览 器 只 需 移 动 到 文档 中 的 特定 位 置 。 这 种 技术 使 得 用 户 能 够 迅速 定位 需要 的 主 
题 或 返回 深 单 ， 而 无 需 手 工 来 回 滚动 页 面 了 。 

命名 销 点 利用 于 长 篇 文 昔 、 扩 术 文件 等 内 容 的 网 页 ， 一 般 放 置 在 网 页 中 每 个 屏幕 或 每 
个 主题 之 后 ， 当 用 户 单 击 茶 一 个 命名 锁 点 时 可 以 转 到 网 页 的 特定 段落 ， 以 方便 阅读 文章 。 

下 面 演 示 命 名 销 太 的 方法 。 

01 将 光标 放 在 僻 设 置 销 扣 的 位 置 ， 本 例 在 图 5-6 所 示 的 “ 观 书 有 感 ” 之 击 。 
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腾 录 作者 ， naster 
让 探 六 新 浪 ， pe Pyrat ona Co 


Se 


癌 书 有 咸 容 日 汉 髓 


T 观 书 有 感 
半 畜 方 塘 一 昭 开 


天 


光 云 采 共 傍 得 
问 江 邦 得 情 如 性 
为 有 站 其 福 水 来 
春 日 
图 5-6 ”指定 插入 销 点 的 位 置 


02 有 单 击 “ 插 入 ”面板 上 的 “常用 ”标签 ， 然 后 选择 命名 错 记 图 标 图 ， 打 开 “ 命 名 
蕴 记 ”对 话 框 。 在 “ 锚 记 名 称 ” 文 本 框 中 键入 错 点 的 名 称 ， 本 例 输入 “ml”。 


ys 注意 : 
2) 锚 点 名 称 必 须 是 惟一 的 ， 只 能 包含 小 写 的 ASCII 字母 和 数字 ， 且 不 能 以 数 


字 开 头 
03 单 击 “确定 ”按钮 关闭 对 话 框 。 在 页 面 中 指定 的 位 置 即 可 看 到 插入 的 命名 镭 点 。 
效果 如 图 $-7 所 示 。 
ee 
插入 的 命名 锚 点 
昌 吏 书 有 感 
半 亩 方 户 一 监 
天 光 云 影 共 徘 和 
2 
春 日 


图 5-7 ”插入 的 命名 鳃 点 


EL 提示 : "如 果 看 不 到 锚 记 标记 ， 选择 “查看 ” / “可 视 化 助 于 2? A 命令 


04】 选择 要 链接 到 命名 错 点 的 文字 。 例 如 图 5-7 中 的 “ 观 书 有 感 ”。 然 后 在 属性 设置 
面板 的 “链接 ”文本 框 中 输入 锚 点 的 名 称 ， 本 例 输入 “#m1”。 


\ 注意 : 

性 在 “链接 ”文本 框 中 输入 销 点 名 称 时 ， 需 要 在 锚 点 名 称 前 面 添加 一 个 特殊 
的 符号 “#”。 例 如 : #top， 其 中 ，top 为 命名 锚 点 。 如 果 所 链接 的 锚 点 不 在 当前 文档 
中 ， 则 在 < 链接” 文本 框 中 首先 要 添加 链接 页 面 的 URL， 然 后 输入 井 号 和 和 销 点 名 称 。 
例如 ， 如 果 要 在 当前 页 面 调用 同一 文件 夹 中 的 index.html 页 面 上 名 为 top 的 锚 点 ， 则 
应 在 “链接 ”文本 框 中 输入 index.html#top。 
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《YA》 DreamiRECRRERESS 中 文 版 入 门 与 提高 实 倒 秆 有 
dar 


用 户 可 以 在 当前 页 面 或 者 男 一 页 面 中 洪 加 任 蕊 数量 的 命名 销 点 。 命 名 销 点 通 弟 与 目录 
或 索引 列表 结 合 使 用 。 

05 月 参照 上 和 面 的 步 又, 在 “春日 ”和 “泛舟 ”两 首 计 之 前 也 添加 命名 销 反 , 分 别 为 “m2” 
和 “m3”， 人 然后 为 相应 的 文本 添加 超级 链接 ， 链 接 到 命名 镭 点 。 


5.2.4 创建 E-Mai 1 链接 


为 了 使 访问 者 在 访问 站 点 时 能 轻松 地 在 网 络 上 与 网 络 管理 者 取得 联系 ， 一 个 最 人 徐 单 的 
办 法 束 是 在 页 面 的 适当 位 置 加 上 网 络 管理 者 E-mail 地 址 的 超级 链接 。 只 要 访问 者 单 击 这 个 
地 址 ， 允 可 以 调用 默认 的 电子 邮件 程序 ， 并 新建 一 个 邮件 窗口 ， 给 网 络 管理 者 上 友 送 电子 邮 
件 了 。 如 末 需 要 ， 用 户 还 可 以 自 定义 发 送 主 题 、 内 容 、 抄 送 和 了 暗 送 等 。 
下 和 面 通过 一 个 人 简单 例子 演示 创建 E-Mail 链接 的 步骤 
01 在 文档 窗口 的 设计 视图 中 ， 选 中 需要 创建 E-Mail 链接 的 文本 或 图 像 〈 如 图 5-8 所 
示 的 邮箱 图 标 ) 。 
02 在 属性 面板 的 “链接 ”文本 框 中 输入 发 件 人 的 地 址 。 本 例 输 入 mailto: 
webmaster@123.com。 然 后 在 “ 蔡 换 ”文本 框 中 键入 符 换 文本 “Email” 
03 保存 文档 ， 并 按 F12 键 预览 页 面 。 效 果 如 图 5-9 所 示 。 在 浏览 F 网 页 时 ， 在 该 超级 
链接 上 单 击 鼠 标 ， 即 可 打开 默认 的 电子 邮件 编辑 器 编辑 邮件 ， 收 件 人 邮件 地 址 目 动 填充 为 
指定 的 电子 邮件 地 址 。 


联系 我 们 联系 我 们 


图 5-8 ”选中 要 创建 邮件 链接 的 图 片 图 5-9 ”电子 邮件 链接 


细心 的 读者 可 能 已 注意 到 了 ， 在 “链接 ”文本 框 中 输入 邮件 地 址 时 ， 和 创建 常规 超级 
链接 不 同 ， 在 邮件 地 址 前 面 必须 添加 “mailto:”， 表 示 该 超级 链接 是 邮件 链接 。 
如 果 没 有 选中 任何 文本 或 图 像 ， 用 户 可 以 通过 “电子 邮件 链接 ”对 话 框 在 页 面 中 插入 
E-Mail 链接 见 下 和 面 的 示例 。 
01 将 插入 点 放置 在 需要 添加 邮件 链接 的 位 置 。 例 如 “联系 作者 : ”之 后 。 
02 单 击 “ 第 用 ”面板 中 的 电子 邮件 链接 虽 按 钮 ， 或 者 执行 “插入 ”/“ 电 子 邮 件 链 
接 ” 沫 单 命 令 ， 弹 出 “电子 邮件 链接 ”对 话 框 。 
03 在 “文本 ” 域 中 键入 要 显示 在 页 面 上 的 链接 文本 , 本 例 输入 webmaster; 在 “E-mail” 
域 中 输入 所 要 发 送 到 的 E-mail 地 址 ， 本 例 输入 webmaster@123.com。 
04 单 击 “确定 ”按钮 关闭 对 话 框 ， 并 完成 链接 的 创建 。 
05 保存 文 要 ， 并 按 F12 键 在 浏览 需 中 了 预览。 页面 效 末 如 图 5$-10 所 示 。 
在 “文本 ” 域 中 输入 的 文本 显示 为 超级 链接 文本 ， 当 将 光标 移 到 该 文本 上 时 ， 状 态 栏 
显示 该 链接 的 具体 地 址 mailto:webmaster@123.com.。 
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一 汪 人 本 条 时 轩 而 直面 喜 有 而 下 站 下 而 而 上 至 jh 而 于 让 


语 响 本 天 | 出 下 
| 萝 六 本 名 必用 沼 


慰 庆 作者 mebmey 
潮 近 到 暂 ; 枫 ，bitpetdryy si com on 


朱 训 名 作 欣 党 


观 书 有 三 春日 沦 和 


车 目 


并 荣 千 红 总 是 春 


图 5-10 页 和 面 效 末 


5.2.5 虚拟 链接 和 脚本 链接 


虚拟 链接 也 称 为 空 链 接 ， 是 指 没 有 指定 的 链接 ， 一般 用 于 问 页面 上 的 文本 或 对 象 深 加 
行为 。 虚 拟 链 接 主 要 包含 以 下 两 种 格式 : 

@ <ahref= 检 虚拟 链接 </a> 

@ <a href=javascript:;> 虚 拟 链 接 </a> 

第 1 种 格式 被 单 击 时 将 返回 到 页 面 项 部 ， 这 种 格式 无 法 添加 行为 ;第 2 种 格式 则 不 会 友 
生 任 何 动作 ， 了 束 好 像 根 本 没有 单 击 一 样 。 

如 条 为 第 2 种 虚拟 链接 添加 了 动作 脚本 ， 则 执行 相应 的 动作 行为 ， 此 时 的 链接 即 为 脚 
本 链接 。 脚 本 链接 可 以 执行 JavaScript 代 但 或 调用 JavaScript 函 数 ， 用 于 在 不 离开 当前 网 页 的 
情况 下 给 予 访问 者 有 关 项 目的 补充 信息 。 脚 本 链接 也 可 用 于 在 访问 者 选 定 特定 项 目 时 执行 
计算 、 表 单 验 证 和 其 它 处 理 任务 。 

下 面 通 过 一 个 简单 实例 读 示 创建 虚拟 链接 和 脚本 链接 的 方法 及 功能 。 

01 踢 选择 欲 作为 虚拟 链接 的 文本 ， 例 如 网 $-11 所 示 的 “返回 页 面 顶端 ”。 

02 目 打开 属性 设置 面板 。 在 属性 设置 面板 的 “链接 ”文本 框 中 输入 “# ?或 “javascript:; ”， 
用 户 要 注意 ，javascript 一 词 后 依次 有 一 个 由 号 和 一 个 分 号 。 

03 贞 选择 需要 作为 脚本 链接 的 文本 ， 例 如 图 5$-11 所 示 的 “进入 VIP 通道 ”。 

04 在 属性 设置 面板 的 “链接 ”文本 框 中 输入 脚本 ， 如 : JavaScriptalert( 只 有 VIP 会 
员 方 可 进入 ! )。 括 号 中 的 内 容 必 须 使 用 单 引 喜 ， 或 在 双 引 号 前 添加 反 斜 杠 进行 转 义 ， 如 
JavaScript:alert(\" 只 有 VIP 会 员 方 可 进入 ! \") 。 

05 和 保存 文档 ， 按 F12 键 在 浏览 器 中 浏览 。 

当 把 光标 移动 到 虚拟 链接 或 脚本 链接 上 时 ， 光 标的 形状 变 为 手 形 ， 单 击 虚 拟 链接 “ 返 
加 页 面 项 痕 ” 后 ， 页 面 会 返回 到 顶 站 ， 单 击 脚本 链接 “进入 VIP 通道 和 后， 会 弹出 一 个 警 
告 杠 ， 显 示 “ 只 有 VIP 会 员 方 可 进入 ! ”， 如 图 5-12 所 示 。 
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79 站 DreaomwWearer LS 中立 版 信 门 与 提高 实例 条 


虚拟 链接 和 脚本 链接 


虚拟 链接 和 脚本 链接 
2 


进入 VP 通道 


图 5-11 添加 链接 前 的 页 面 效果 图 $-12 ”预览 效 采 


5. 2.6 使 用 URL 面 板 管理 超级 链接 


对 于 茶 些 大 型 站 点 来 说 ， 处 理 所 有 超级 链接 资源 的 完整 列表 可 能 会 区 成 很 玉手 的 问 
古 。 利 用 Dreamweaver 提 供 的 URL 面 板 ， 可 以 将 所 有 链接 资源 归 类 在 一 起 ， 为 资源 指定 别 
名 以 指明 用 途 ， 以 便 日 后 查找 、 维 护 资 源 。 

URL 的 全 称 是 Uniform Resource Locator 〈 统 一 资源 定位 器 ) 。 从 最 简单 的 单一 页 面 到 
复杂 的 综合 站 点 ， 所 有 的 资源 内 容 都 可 以 通过 URL 面 板 进 行 访问 。 下 和 面 通过 两 个 人 简单 例子 
演示 新 建 URL 和 编辑 URL 的 方法 。 

01 选择 “窗口 ”/“ 资 源 ” 亲 蛙 命 令 ， 打 开 “ 资 源 ” 和 面板 。 
02 9 单 击 “资源 ”面板 左 侧 的 URLs 按 钮 区 ， 切 换 到 “URLs” 面 板 ， 如 图 5-13 所 示 。 

“URLs” 面 板 有 两 种 视图 : 站 点 和 收藏 。 站 点 视图 如 图 5-13 所 示 ， 在 该 面板 下 方 的 列 
表 窗 格 中 ， 列 出 了 当前 站 点 中 使 用 的 所 有 链接 资源 及 类 型 ， 包 括 FTP、gopher、HTTP、 
HTTPS、JavaScript、 电 子 邮 件 (mailto〉 以 及 本 地 文件 (file://) 链接 。 

收藏 视图 用 于 收藏 音 用 的 资源 。 收 藏 资源 并 不 作为 单独 的 文件 存储 在 人 磁盘 上 ， 它 们 是 
对 “站 点 ”视图 列表 中 的 资源 的 引用 。“ 站 点 ”视图 和 “收藏 ”视图 的 大 多 数 操 作 都 是 相 
同 的 ， 不 过 有 儿 种 任务 只 能 在 “收藏 ”视图 中 执行 。 

03 单 击 “ 收 藏 ” 单 选 按钮 ， 切 换 到 “收藏 ” 视 见 ， 如 图 $-14 上 所 示 。 
04 月 单 击 “ 收 藏 ”视图 右 下 角 的 “新 建 URL” 按 钮 区 ， 弹 出 “添加 URL” 对 话 框 ， 
如 图 5-15 所 示 。 


URLs: (站 点 避 收 藏 目 


在 这 里 的 单 选 控 
钮 组 中 切换 视 攻 | 


| 区) 园 回回 加 加固 团团 


办 
上 二 一 


图 $-13 ”站 点 视图 图 5-14 ”收藏 视图 
76 


05 虽 在 “添加 URL” 对 话 框 中 输入 URL 以 及 上 昵称。 本 例 在 “URL” 文 本 框 中 输入 
http://www.baidu.com; 在 “了 昵称” 栏 键入 “百度 搜索 ”。 
06 羊 击 “确定 ”关闭 对 话 框 。 
此 时 ， 在 “收藏 ”视图 中 可 以 看 到 新 建 的 URL， 视 图 下 方 的 窗 格 中 显示 该 UREL 的 昵称 
为 “百度 搜索 ”， 类 型 为 “HTTP”， 值 为 http://www.baidu.com， 如 图 5-16 所 示 。 


资源 


图 $-1$ “添加 URL” 对 话 框 图 5-16 ”添加 URL 


07 在 Dreamweaver 文 档 窗口 中 选中 要 应 用 该 URL 的 文本 或 图 像 ， 如 图 5-17 所 示 。 

08 在 “URLs” 和 面板 的 “收藏 ”视图 中 选中 需要 的 URL， 例 如 “百度 搜索 ”， 然 后 
单 击 视 岁 底部 的 “应 用 ”按钮 ， 即 可 将 指定 的 URL 应 用 到 选 定 文本 ， 如 网 5$-18 所 示 。 

09 9 如 果 在 第 07 步 中 没有 选中 文本 ， 而 是 将 插入 点 放 在 文本 后 面 ， 则 “收藏 ” 视 
图 底部 的 “应 用 ”按钮 变 为 “插入 ”按钮 ， 单 击 该 按钮 ， 可 在 插入 点 处 插入 指定 的 链接 文 
本 ， 如 图 $-19 所 示 。 


图 5-17 选中 文本 图 5-18 ”应 用 URL 图 5-19 插入 URL 
5.3 使 用 热点 制作 图 像 映射 


在 通常 情况 下 ， 一 个 图 像 只 能 对 应 一 个 超级 链接 。 在 浏览 网 页 的 过 程 中 ， 读 者 可 能 会 


下 面 通 过 一 个 实例 说 明 如 何 创建 图 像 映射 。 
01 有 新 建 一 个 文件 。 单 击 “ 插 入 ” 栏 中 的 图 像 按 钮 回 ， 在 文档 窗口 中 插入 一 幅 图 像 。 
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Dreamwearer C56 中 六 版 入 门 与 提高 实例 和 审 肌 
如 图 520 左 图 所 示 - : 


将 “神农 项 ”三 个 字 包 围 后 释放 忌 标 。 然 后 在 属性 面板 上 设置 其 链接 属性 。 


05 选择 多 边 形 热点 工具 过 ， 在 “九寨 沟 ” 的 左上 角 单 击 鼠 标 左 键 ， 加 入 一 个 定位 
点 ; 再 在 左下 角 单 击 鼠 标 左 键 ， 加 入 第 二 个 定位 点 ， 这 时 两 个 定位 点 间 会 连 成 一 条 直线 。 


按 同 样 的 方法 再 洪 加 三 个 定位 点 ， 此 时 五 个 定位 点 会 连 成 一 个 五 边 形 ， 将 “九寨 沟 ” 三 个 
字 包 围 。 


面板 上 设置 其 链接 属性 。 最 终 效 果 如 图 5-20 右 图 所 示 。 
和 08 生 执行 “文件 ”/“ 保 存 ” 命 令 保存 文档 。 然 后 按 下 F12 键 在 浏览 器 中 预览 整个 页 


面 ， 当 用 户 把 鼠标 移动 到 热点 区 域 上 时 ， 鼠 标的 形状 变 为 手 形 ， 并 且 在 浏览 器 下 方 的 状态 
栏 中 显示 了 链接 的 路 径 。 当 用 户 单 击 各 个 热点 区 域 ， 则 会 打开 相应 的 超级 链接 文件 。 

在 绘制 热点 区 域 后 ， 常 常 需要 调整 热点 区 域 的 大 小 和 形状 ， 以 满足 设计 需要 。 

(1) 在 属性 设置 面板 左下 角 单 击 调整 热点 工具 [NR 按钮 ， 然 后 单 击 需 要 调整 大 小 的 热 
点 区 域 ， 此 时 被 选中 的 热点 区 域 周围 会 出 现 控制 手柄 。 

(2) 把 鼠标 放 在 这 些小 方块 上 ， 然 后 拖拉 鼠标 即 可 改变 热点 区 域 的 大 小 或 形状 。 

如 果 是 矩形 或 多 边 形 热点 区 域 ， 如 此 操作 会 改变 区 域 的 形状 ， 而 对 于 圆 形 热点 区 域 ， 
上 述 操作 只 会 改变 形状 的 大 小 。 

如 果 要 改变 热点 区 域 的 位 置 ， 可 以 选择 热点 调整 工具 本， 并 在 需要 移动 的 热点 区 域 单 
击 ， 然 后 按 下 和 鼠标 左 键 进行 拖 上 忠 。 但 这 种 移动 方式 很 难 精确 地 将 热点 移动 到 需要 的 位 置 。 
此 时 用 键盘 的 方向 键 可 以 以 像素 为 单位 移动 热点 位 置 。 选 中 热点 ， 按 Shift + 方向 键 ， 一 次 


可 以 移动 10 个 像 双 。 如 下 直接 按 方 同 键 ， 则 一 次 只 能 移动 一 个 像素 。 
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5.4 实例 制作 之 制作 导航 条 


在 上 一 草 的 实例 制作 中 ， 已 完成 了 导航 条 的 一 部 分 ， 本 下 将 制作 具体 的 导航 项 目 并 为 

导航 项 目 添 加 超级 链接 。 

01 9 将 光标 定位 在 图 5-21 所 示 的 第 二 行 蛙 元 格 中 ， 然 后 单 击 属性 面板 上 的 拆 分 单元 
格 按钮 天 ， 打 开 “ 拆 分 单元 格 ” 对 话 框 。 

02 在 对 话 框 中 选中 “ 行 ”， 并 在 “ 行 数 ” 微 调 框 中 输入 3， 然 后 单 击 “ 确 定 ” 按 钮 ， 
将 第 二 行 单元 格 拆 分 为 3 行 。 单 击 “ 插 入 ”面板 上 的 图 像 按 钮 时"， 在 打开 的 “选择 文件 ” 
对 话 框 中 选中 需要 的 图 片 ， 然 后 单 击 “ 人 确定” 按钮 插入 图 片 。 此 时 的 页 面 效 果 如 图 5-22 所 
人 \。o 

03 单 击 “编辑 规则 ”按钮 ， 在 弹出 的 “ 狐 建 CSS 规 则 ”对 话 框 中 指定 选择 器 类 型 为 
“类 ”， 和 选择 天 名 称 为 .imgborder， 定 义 规 则 的 位 置 选 择 “ 新 建 样 式 表 文 件 ”。 单 击 “ 确 
定 ” 按 钮 ， 在 弹出 的 对 话 框 中 设置 新 建 样式 表 文 件 的 名 称 和 保存 路 径 。 然 后 在 弹出 的 规则 
定义 对 话 框 中 选择 “边框 ”分 类 ， 并 设置 边框 类 型 为 none， 宽 度 为 0px。 单 击 “ 确 定 ” 鬼 
钮 关闭 对 话 框 。 选 中 上 一 步 插入 的 图 像 , 在 属性 面板 上 的 “类 ”下 拉 列 表 中 选择 imgborder。 


图 5-21 ”导航 条 效果 图 5-22” 拆 分 单元 格 并 插入 图 片 后 的 效果 

04 在 属性 面板 上 为 第 三 行 的 单元 格 设 置 背 景 图 人像， 并 在 第 四 行 的 单元 格 中 插入 一 
幅 图 片 , 设置 “类 ”为 iImgborder, 然后 调整 单元 格 到 合适 的 高 上 度 。 此 时 的 页 面 效果 如 图 5-23 
所 示 。 

05 打开 “插入 ”浮动 面板 ， 并 切换 到 “布局 ”面板 。 然 后 单 击 “ 布 局 ”面板 “标准 ” 
模式 下 的 “绘制 AP div” 图 标明 。 此 时 ， 鼠 标 指针 变 成 一 个 十 字形 。 

06 按 下 Ctn 键 的 同时 在 第 三 行 的 单元 格 中 按 下 鼠标 左 键 并 拖 动 ， 绘 制 五 个 AP 元 素 。 
效果 如 图 5-24 所 未 。 

07 肯 将 光标 定位 在 第 一 个 AP 元 素 内 ， 单 击 “ 插 入 ”/“ 和 名 用 ”面板 上 的 网 像 按 钮 ， 在 
打开 的 “选择 图 像 源 文件 ”对 话 框 中 选择 已 在 图 像 编辑 软 件 中 制作 好 的 第 一 个 导航 项 目 ， 
并 设置 其 类 为 Imgborder， 然 后 单 击 “确定 ”按钮 插入 所 需要 的 图 片 。 

08 按照 上 一 步 的 方法 ,在 其 他 四 个 AP 元 素 中 插入 导航 项 目 ， 并 调整 AP 元 素 的 大 小 
和 位 置 。 此 时 的 效果 如 图 5-25 所 示 。 - 

09 朋 选中 第 一 个 导航 项 目 图 片 ， 单 击 “ 链 接 ” 文 本 框 右 侧 的 “指向 文件 ”图 标 总 ， 
并 按 下 鼠标 左 键 拖 动 到 “文件 ”面板 中 一 个 现存 的 页 面 write.html， 然 后 释放 鼠标 ， 即 可 将 
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6 | Dreammearer C56 中 文 蚊 入 门 与 可 高 实例 霜 形 


选 定 的 导航 项 目 图 片 链接 到 指向 的 文件 。 


图 5-23 ”设置 表格 背景 图 5-24 ”绘制 AP 元 又 图 5-25 ”插入 图 上 厂 


109 在 “目标 ”下 拉 列 表 中 选择 链接 目标 打开 的 方式 。 本 例 暂 时 保留 默认 设置 ， 具 
体 设置 将 在 后 面 的 章节 中 进行 修改 。 

11 同 理 为 其 他 三 个 导航 图 片 添加 超级 链接 ， 分 别 链接 到 shop.asp?index=0、 
xiangce.html、liuyan.html。 

在 这 里 初学 者 需要 注意 ， 在 链接 到 shop.asp 网 页 时 ， 需 要 添加 一 个 “? ”后 级 。 我 们 
通常 见 到 的 网 页 的 后 级 是 .htm、.html、.shtml、.xml 和 等， 这 是 静态 网 页 的 常见 形式 。 与 此 相 
对 应 的 是 动态 网 页 ， 其 网 页 URE 的 后 缀 为 .asp、.aspx、.jsSp、.php、.perl、.cgi 等 形式 ， 且 
在 访问 动态 网 页 时 ， 其 网 址 中 有 一 个 标记 性 的 符号 一 一 “?”， 例 如 : http:/www. 
pagehome.cn/ip/index.asp?id=1。 在 本 例 中 ，shop.asp 就 是 一 个 动态 网 页 。 

动态 网 页 中 的 “? ”对 搜索 引擎 检索 存在 一 定 的 问题 ， 搜 索引 擎 一 般 不 可 能 从 一 个 网 
站 的 数据 库 中 访问 全 部 网 页 ， 或 者 出 于 技术 方面 的 考虑 ， 不 去 抓 取 网 址 中 “? ”后 和 面 的 内 
容 ， 因 此 采用 动态 网 页 的 网 站 在 进行 搜索 引擎 推广 时 需要 做 一 定 的 技术 处 理 才 能 适应 搜索 
引擎 的 要 求 。 

12 选中 第 四 个 导航 图 片 ， 即 “友情 链接 ”， 在 其 属性 面板 的 “链接 “文本 框 中 输 
入 http://www.uy123.com/。 

13 选中 第 二 行 单 元 格 中 插入 的 网 片 ， 即 蝴蝶 图 片 。 打 开 属 性 面板 ， 单 击 面板 底部 


15 旧 在 属性 面板 的 “链接 ”文本 框 中 输入 网 站 首页 的 URL， 即 index.html; “目标 ” 
为 _blank; 在 “ 蔡 换 ”文本 框 中 输入 “返回 首页 ”。 

16 单 击 第 四 行 单元 格 中 搬入 的 图 片 ， 在 属性 和 面板 的 “链接 ”文本 框 中 输入 “#”， 
在 “类 ”下 拉 列 表 中 选择 imgborder。 即 为 该 图 片 创建 了 一 个 虚拟 链接 ， 且 在 浏览 器 中 无 边 
80 


框 显示 。 在 浏览 右 中 单 击 此 图 片 后 ， 将 返 图 到 页 面 项 部 。 


17 保存 文件 ， 并 按 F12 键 在 浏览 亏 中 预览 效 订 、 检 碍 超级 链接 。 
单 击 导 航 项 目 图 片 ， 即 可 切换 到 相应 的 页 面 。 由 于 其 他 页 面 还 未 制作 ， 因 此 是 空白 页 
面 。 单 击 叶 航 条 中 的 蝴蝶 ， 可 返回 到 主页 ; 单 击 呈 航 条 的 部 的 图 请 ， 可 返回 到 页 面 项 器。 
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6.1 _ HTML 语言 概述 


HTML 是 Hypertext Markup Language 的 首 字 母 缩写 ， 通 第 称 作 超 文 本 标签 语言 ， 或 超 
文本 链接 标示 语言 ， 它 是 基于 SGML (Standard General Markup Laneuage，,， 标准 通用 标签 语 
言 ) 的 一 种 摘 述 性 语言 ， 由 W3C (World wide Web Consortium， 全 球 信 息 网 协会 ) 推出 ， 
并 被 国际 标准 ISO8879 所 认可 。 它 是 用 于 建立 web 页 面 和 其 他 超级 文本 的 语言 ， 是 WWW 的 
描述 语言 。 

1997 年 12 月 18 日 W3C 推 荐 的 HTML 标 准 HTML 4.0 倡 导 了 两 个 理念 : 将 文档 结构 和 显示 
样式 分 离 与 更 广泛 的 文档 兼容 性 。 由 于 同期 CSS 层 苇 样 式 表 的 配套 推出 , 更 使 HTML 和 CSS 
的 网 页 制作 能 力 达到 前 所 未 有 的 高 度 。1999 年 12 月 ，W3C 网 络 标准 化 组 织 推出 改进 版 的 
HTML4.01 相 当成 熟 可 靠 ， 一 直 沿 用 至 今 。HTML4.01 比 以 前 版 本 在 国际 化 设置 、 提 高 兼容 
性 、 样 式 表 文 持 以 及 脚 、 打 印 方面 都 有 上 所 提高 。 现 在 第 提 到 的 HTML4 吏 是 指 HTML4.01 。 

HTML 并 不 是 真正 的 程序 设计 语言 ， 它 只 是 标签 语言 。 使 用 HTML 编 写 的 网 页 文件 是 
标准 的 ASCIT 文 件 ， 扩 展 名 通常 为 .htm 或 .html。 了 人 解 网 页 的 用 户 可 能 昕 说 过 许多 可 以 编辑 
网 页 的 软件 ， 事 实 上 ， 用 户 可 以 用 任何 文本 编辑 右 建 YHTML 页 面 ， 例 如 Windows 的 “ 记 
事 本 ”程序 。 

HTML 文 本 是 由 HTML 命 令 组 成 的 摘 述 性 文本 ， 它 能 独立 于 各 种 操作 系统 平台 (如 
UNIX，Windows 等 ) 。HTML 命 令 可 以 说 明文 学 、 图 形 、 动 画 、 声 首 、 表 格 、 链 接 每 。 使 
用 HTML 语言 描述 的 文件 ， 需 要 通过 WWW 浏 览 器 显示 出 效果 ， 浏 览 器 的 主要 作用 就 是 解 
释 超 文本 文件 中 的 语言 。 当 用 浏览 器 打开 网 页 时 ， 浏 览 右 先 读 取 网 页 中 的 HTML 代 人 码 ， 分 
析 其 语法 结构 ， 然 后 根据 解释 的 结果 ， 将 单调 乏味 的 文字 显示 为 丰富 多 彩 的 网 页 内 容 ， 而 
不 是 显示 事先 存储 于 网 页 中 的 内 容 。 正 是 因为 如 此 ， 网 页 显示 的 速度 同 网 页 代码 的 质量 有 
很 大 关系 ， 保 持 精 从 和 高 效 的 HIML 源 代码 是 非常 重要 的 。 

近年 来 ， 用 户 可 能 经 常 在 网 络 上 看 到 “HTML5”。 所 谓 HTML5S， 是 针对 HTML4 而 
言 的 , 简 蛙 地 说 , 束 是 下 一 代 的 HIML, 是 W3C 与 WHATWG(Web Hypertext Application 
Technology Working Group〉 双方 合作 创建 的 一 个 新 版 本 的 HTML， 将 成 为 HIML、 
XHTML 以 及 HTML DOM 的 新 标准 ， 其 前 身 名 为 Web Applications 1.0。HTML 5 增加 了 
更 多 样 化 的 API， 提 供 了 骨 入 音频 、 视 频 、 网 上 的 函数 、 客 户 问 数据 存储 ， 以 及 区 互 式 文 
档 。 下 面 我 们 来 简单 了 解 一 下 HTMLS 中 的 一 些 有 趣 的 特性 : 

用 于 绘画 的 canvas 元 素 

用 于 媒介 回放 的 video 和 audio 元 素 

对 本 地 离线 存储 的 更 好 的 支持 

新 的 特殊 内 容 元 素 ， 比 如 article、footer、header、nav、section 
新 的 表单 控件 ， 比 如 calendar、date、time、email、url、search 

HTML 5 通过 制定 如 何 处 理 所 有 HTML 元 素 以 及 如 何 从 错误 中 恢复 的 精确 规则 ， 改 
进 了 互 操作 性 ， 并 减少 了 开发 成 本 。 尽 管 HTMLS 仍 处 于 完善 之 中 ， 推 出 正式 规范 仍 需 多 
年 的 努力 ， 然 而 现在 大 部 分 现代 浏览 器 已 经 具备 了 某 些 HTMLS5 改 持 ， 例 如 Firefox、 
Chrome、Opera、Safari( 版 本 4 以 上 ) 及 Internet Explorer 9 (Platform Preview) 己 支持 HTML5 


全 9 多 
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J),, DreamwearerlGs6 中 文 版 入 门 与 接 高 实例 款 有 有 


技术 。 相信 在 不 久 的 将 来 ， 网 页 设计 师 们 就 可 以 使 用 HTML5 和 CSS3 设 计 页 面 代 码 更 富有 
语义 化 ， 视 听 效 果 更 炫 的 网 页 作品 。 


6.2 ” HTML 的 语法 结构 


标准 的 HTML 由 标签 和 文件 的 内 容 构成 ， 并 用 一 组 “<” 与 “>” 括 起 来 ， 且 与 字母 的 
大 小 写 无 天。 例如 : 

<ims src="images/fantasySfloat5.gif" width="90" height="$51" 人 <b> 买 家 须知 </b> 

在 用 浏览 左 显 示 时 ， 标 签 sb> 和 </b> 不 会 被 显示 ， 浏 览 器 在 文档 中 发 现 了 这 对 标签 ， 
就 将 其 中 包容 的 文字 《本 例 中 是 “ 买 家 须知 ”) 以 粗 体 形式 显示 。 如 图 6-1 所 示 。 


守卫。 买 家 须知 
图 6-1 “<“b> 标 签 的 示例 效 打 


关于 标签 ， 需 要 提请 读者 注意 的 是 ， 它 们 是 成 双 出 现 的 。 每 当 使 用 一 个 标签 ， 例 如 
<blockquote>， 则 必须 用 为 一 个 标签 </blockquote> 将 它 天 团 。 但 是 也 有 一 些 标签 例外 ， 例 
如 <input> 标 签 。 

严格 地 说 ， 标 签 和 标签 元 素 不 同 ， 标 签 元 素 是 位 于 “<” 和 “>” 符 号 之 间 的 内 容 ， 如 
上 例 中 的 “ 买 家 须知 ”;， 而 标签 则 包括 了 标签 元 素 和 “<” 和 “>” 符 号 本 身 。 但 是 通常 将 
标签 元 素 和 标签 当 作 一 种 东西 ， 因 为 脱离 了 “<” 和 “>” 符 号 的 标签 元 素 旦 无 意义 。 在 本 
革 后 耐 的 小 市 中 ， 不 作 特 别 说 明 时 ， 将 标签 和 标签 元 素 统 一 称 作 “ 标 签 ”。 

一 般 来 说 ，HTML 的 语法 有 以 下 3 种 表达 方式 : 

< 标签 > 对 象 </ 标 签 >; 

< 标签 属性 1= 参 数 1 属性 2= 参 数 2> 对 象 </ 标 签 >; 

< 标签 > 。 

下 和 面 分 别 对 这 3 种 形式 及 髓 僚 标 签 进行 介绍 。 


6. 2. 1 《标签 > 对 象 《/ 标 签 > 


这 种 语法 结构 显示 了 使 用 封闭 类 型 标签 的 形式 。 大 多 数 标签 是 封闭 类 型 的 , 也 就 是 说 ， 
它们 成 对 出 现 。 所 谓 成 对 ， 是 指 一 个 起 始 标 签 总 是 搭配 一 个 结束 标签 ， 在 起 始 标签 的 标签 
名 前 加 上 符号 “/” 便 是 其 终止 标签 ， 如 <head> 与 </head> 。 夹 在 起 始 标签 和 终止 标签 之 间 
的 内 容 受 标签 的 控制 。 

例如 : < 谊 网 页 设计 DIY</A>，< 让 和 </ 让 之 间 的 “网 页 设计 DIY” 受 标签 1 的 控制 。 标 签 
i 的 作用 是 将 所 控制 的 文本 内 容 显 示 为 斜体 ， 所 以 在 浏览 器 中 看 到 的 “网 页 设计 DIY” 将 是 
笠 体 竺 。 

如 果 一 个 应 该 封闭 的 标签 没有 结束 标签 , 则 可 能 产生 意 想 不 到 的 错误 , 随 浏览 器 不 同 ， 
可 能 出 错 的 结果 也 不 同 。 例 如 ， 如 果 在 上 例 中 ， 没 有 以 标签 </i> 结 束 对 文字 格式 的 设置 ， 
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可 能 后 血 押 有 的 文学 部 会 以 冬 体 子 的 格 臣 出现 。 
了 注意 : 
2 并 非 所 有 HTML 标签 都 必须 成 对 出 现 ， 本 书 第 6.2.3 节 将 介绍 这 种 非 封 闭 


类 型 的 标签 。 建 议 读者 在 使 用 HTML 标签 时 ， 最 好 先 弄 清 标签 是 否 为 封闭 类 型 的 。 


6. 2. 2 《标签 属性 1= 参 数 1 属性 2= 参 数 2> 对 象 《</ 标 签 > 


这 种 语法 结构 是 上 一 种 语法 结构 的 扩展 形式 ， 利 用 属性 进一步 设置 对 象 的 外 观 ， 而 参 
数 则 是 设置 的 结 

每 个 HTML 标签 都 可 以 有 多 个 属性 ， 属 性 名 和 属性 值 间 是 用 “=” 连 接 ， 构 成 一 个 完 
整 的 属性 ， 例 如 <body bgcolor= "#FF0000 "> 表示 将 网 页 背 永 色 设 置 为 红色 。 多 个 属性 之 间 
用 空格 分 开 ， 例 如 : 

<font face= "隶书 " size= "20 " color="#FF0000"> 爱 束 在 你 号 边 </font> 

上 述 语句 表示 将 “ 爱 怠 在 你 身边 ”的 字体 设置 为 隶书 ， 字 号 设置 为 20， 颜色 议 置 为 红 
色 ， 如 图 6-2 所 示 。 


受训 在 你 号 这 


图 6-2 <font> 标 签 的 示例 效果 


6. 2. 3 《标签 > 


前 耐 说 过 ，HTML 标 签 并 非 部 成 对 出 现 。 而 这 种 不 成 对 出 现 的 标签 称 为 非 封 闭 类 型 标 
符 。 在 HTML 语 言 中 ， 非 封闭 类 型 的 标签 不 多 ， 读 者 最 常见 的 应 该 是 换行 标签 <br>。 

例如 : 在 Dreamweaver CS6 的 代 公 视图 的 <body> 与 </body> 标 签 之 间 输 入 <font face= " 
隶书 " size= "5"”color="#006600"> 溪 水 急 半 要 流 问 海洋 <br> 浪 潮 却 淘 望 重 回 土地 
&nbsp;</font>， 在 浏览 器 中 的 显示 效果 如 图 6-3 所 示 。 


溪水 急 著 要 流向 海洋 
浪潮 却 渴望 重 回 土地 


图 6-3 “br> 标 俭 的 示例 效 末 


使 用 换行 标签 使 一 行文 学 在 中 间 换 行 ， 显 示 为 两 行 ， 但 结构 上 仍 属于 同一 个 段落 。 


6. 2.4 ”标签 同 套 


几乎 所 有 的 HTML 代码 都 是 上 面 三 种 形式 的 组 合 ， 标 签 之 间 可 以 相互 巷 套 ， 形 成 更 为 
复杂 的 语法 。 例 如 ， 如 采 和 希望 将 一 行文 本 同时 设置 粗 体 和 和 斜体 格式 ， 则 可 以 采用 下 面 的 语 
人 铅 : 
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3) Drea 训 REALS6 中 文 版 入门 与 提高 实例 者 E 
dat 


<b><i 十 里 香 </i> </b> 

在 浏览 器 中 的 显示 效 末 如 图 6-4 所 示 : 

用 户 在 舱 俯 标签 时 需要 注意 标签 的 散 套 顺序 ， 如 来 标签 的 网 套 顺 友 发 生 混 乱 ， 则 可 能 
会 出 现 不 可 预料 的 结果 。 例 如 ， 对 于 上 和 面 的 例子 ， 也 可 以 这 样 写 成 如 下 形式 : 

<i> <b> 十 里 香 </b></i> 

该 语句 在 浏览 器 中 的 显示 效果 也 如 图 6-$ 所 示 。 但 是 ， 尽 量 不 要 写成 如 下 的 形式 : 

<i><b> 十 里 香 </i></b> 

上 和 面 的 语句 中 ， 标 签 散 僚 发 生 了 错误 。 用 户 切 换 到 “设计 ”视图 ， 可 以 看 到 其 显示 效 
果 如 图 6-5 所 示 。 蛙 击 标签 为 黄色 的 文本 块 , 在 属性 面板 中 可 以 看 到 相关 的 错误 提示 ， 提 未 
用 户 这 是 一 个 无 效 的 标签 ， 因 为 这 是 一 个 交友 的 或 未 关闭 的 标签 。 如 图 6-6 所 示 。 


图 6-4 ”标签 朋 套 的 示例 效 末 图 6-5 ”错误 的 标签 骨 僚 示例 效果 


属性 ww 
< 无 部 的 标记 标记 为 非法 固 汶 这 是 一 个 亚 选 的 或 未 尖 闭 的 标签 。 
b> 用 并 未 荣 单 重新 应 用 此 样式 ， 樵 后 册 降 这 些 标 敬 。 芭 


图 6-6 <br> 标 签 的 示例 效果 


尽管 这 个 错误 的 例子 在 大 多 数 浏览 右 中 可 以 被 正确 识别 。 但 是 对 于 其 他 的 一 些 标 俭 ， 
如 果 贬 套 发 生 错误 的 话 ， 束 不 一 定 有 这 么 好 的 运气 了 。 为 了 保证 文档 有 更 好 的 兼容 性 ， 尺 
量 不 要 发 生 标 签 嵌 僚 顺序 的 错误 。 


6.3 常用 的 HTML 标 签 


本 节 将 评 细 介绍 HTML 中 常用 的 一 些 标 签 。 和 掌握 这 些 标签 的 用 法 ， 对 今后 的 网 页 制作 
可 以 起 到 事半功倍 的 效 朱 。 


6.3.1 文档 的 结构 标签 


在 Dreamweaver CS6 中 创建 了 一 个 HTML 文 档 后 ， 如 果 切 换 到 “代码 ”视图 会 发 现 ， 
尽管 新 建文 档 的 设计 视图 是 空白 的 ， 但 是 其 中 己 经 有 了 不 少 源 代 人 码 。 在 团 认 状态 下 ， 这 些 
源 代 人 如 下 所 示 : 

<IDOCTYPE html PUBLIC “"-/W3C/l/DTD XHTIML 1.0 Transitional//EN" 
"http://wWwww.w3.orgs/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

<html xmjns= "Phttp:/www.w3.org/1999/Xhtm] > 

<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utt-8” /> 
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<tite> 无 标题 文档 </titles 
</head> 

<body> 

</body> 

</html> 

基本 HTML 页 面 以 DOCTYPE 开 始 , 和 它 声 明文 档 的 类 型 ， 且 和 它 之 前 不 能 有 任何 内 容 〈 包 
括 换 行 符 和 罕 格 ) ， 人 否则 将 使 文档 声明 无 效 。 

上 面 的 代码 包括 了 一 个 标准 的 HTML 文件 应 该 具有 的 4 个 组 成 部 分 。 

1. <html> 标 签 ”<html>...</html> 标 签 是 HTML 文 档 的 开始 和 结束 标签 ， 告 诉 浏览 器 
这 是 整个 HTML 文 件 的 范围 。 

HTML 文 档 中 所 有 的 内 容 都 应 该 在 这 两 个 标签 之 间 ， 一 个 HTML 文档 非 注 释 代 码 总 是 
以 <html> 开 始 ， 以 </html> 结 束 的 。 

2. <head> 标 签 “head>…</head> 标 签 一 般 位 于 文档 的 头 部 ， 用 于 包含 当前 文档 的 有 
天 信 息 ， 例 如 标题 和 关键 学 等 ， 通 种 将 这 两 个 标签 之 间 的 内 容 统称 作 HTML 的 “ 头 部 ”。 

位 于 头 部 的 内 容 一 般 不 会 在 网 页 上 直接 显示 ， 而 是 通过 另外 的 方式 起 作用 。 例 如 ， 在 
HTMEL 的 头 部 定义 的 标题 不 会 显示 在 网 员 上 ， 但 是 会 出 现在 网 页 的 标题 栏 上 。 

3. <xtitle> 标 签 <title> 和 </tittle> 标 签 位 于 HTML 文档 的 头 部 ， 即 位 于 <head> 和 </head> 
标签 之 间 ， 用 于 定义 显示 在 浏览 器 窗口 左上 角 的 标题 栏 中 的 内 容 。 

4. <body> 标 签 <body>..…</body> 用 于 定义 HTML 文档 的 正文 部 分 ,例如 文字 、 标 题 、 
段落 和 列表 等 , 也 可 以 用 来 定义 主页 背景 颜色 。<body>...</body> 定 义 在 </head> 标 签 之 后 ， 
<html> .</html> 标 签 之 间 。 所 有 出 现在 网 页 上 的 正文 内 容 都 应 该 写 在 这 两 个 标签 之 间 。 

<body> 标 签 有 6 个 常用 的 可 选 属性 ， 主 要 用 于 控制 文档 的 基本 特征 ， 如 文本 、 背 景 颜 
色 等 。 各 个 属性 介绍 如 下 : 

background: 该 属性 用 于 为 文档 指定 一 幅 图 像 作为 背景 。 

text: 该 属性 用 于 定义 文档 中 非 链 接 文 本 的 默认 颜色 。 

link: 该 属性 用 于 定义 文档 中 一 个 未 被 访问 过 的 超级 链接 的 文本 颜色 。 

alink: 该 属性 用 于 定义 文档 中 一 个 正在 打开 的 超级 链接 的 文本 闫 色 。 

vlink: 该 属性 用 于 定义 文档 中 一 个 已 经 被 访问 过 的 超级 链接 的 文本 磊 色 。 

bgcolor: 该 必 性 用 于 定义 网 页 的 背景 颜色 。 

例如 ， 如 末 和 希望 将 文档 的 背景 图 像 设 置 为 主 目录 下 的 001.jpg， 文 本 颜色 设置 为 黑色 ， 
未 访问 超级 链接 的 文本 颜色 设置 为 绿色 ， 已 访问 超级 链接 的 文本 颜色 设置 为 红色 ， 正 在 访 
问 的 超级 链接 的 文本 两 色 设 置 为 赣 色 ， 则 可 以 使 用 如 下 的 <body> 标 和 俭 : 

<body background = "file:///Cl/Inetpub/wwwroot/001.gif" text = "black" link = "green" 
alink = "blue” vlink = Ted > 

在 页 面 中 输入 文本 ， 并 创建 超级 链接 后 的 页 面 预览 效 末 如 图 6-7 所 示 。 

其 中 ， 页 面 背 景 图 像 为 C:\Inetpub\wwwroot\001.gif; “body 标 签 示 例 ” 为 普通 文本 ， 
显示 为 黑色 ; “链接 一 ”为 未 访问 过 的 链接 ， 显 示 为 绿色 ; “链接 二 ”为 已 访问 过 的 链接 ， 
显示 为 红色 ; “链接 三 ”为 正在 访问 的 链接 ， 显 示 为 监 色 。 
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未 访问 的 链接 
| 9 
Ss 
已 访问 的 链接 “| 链接 二 


Er 正在 访问 的 链接 


图 6-7 <“body> 标 签 的 示例 效果 


6. 3.2 ”注释 标签 


HTML 的 客户 关注 释 标 签 为 <!--.…-->， 在 这 个 标签 内 的 文本 都 不 会 在 浏览 需 窗 口中 显 
示 出 来 ， 一 般 将 客户 哨 的 脚本 程序 段 放 在 此 标签 中 ， 对 于 不 文 持 该 脚本 语言 的 浏览 郁 也 可 
隐藏 程序 代码 。 


例如 在 上 例 中 ， 将 “链接 三 ”标签 为 注释 文本 的 语句 如 下 : 
<! -- <p><a href="index.html"> 链 接 三 </a></p>--> 
在 Dreamweaver CS6 的 “代码 ”视图 中 ， 注 释 内 容 显 示 为 灰色 ， 如 图 6-8 所 示 。 


这 一 行星 注释 <p>bodvy 慰 记 示 全 :p= 
El <p><a href="123.html" > 性 接 一 2 /a /p> 
看 看 网 


图 6-8 注释 标签 示例 效果 
修改 后 的 文件 在 浏览 右 中 的 预览 效 末 如 图 6-9 所 示 。 


body 标 记 示 例 


图 6-9 注释 标签 示例 效果 


对 比 图 6-6 可 以 看 出 , 被 注释 的 文本 不 会 在 浏览 器 中 显示 。 但 如 果 是 服务 器 端 程序 代码 ， 
即使 在 这 个 注释 标签 内 也 会 被 执行 。 


6. 3.3 文本 格式 标 侈 


文本 格式 标签 用 于 控制 网 页 中 文本 的 样式 ， 如 大 小 、 字 体 、 段 沙 样式 等 。 
1. <font> 标 签 <font > ... </font> 标 签 用 于 设置 文本 字体 格式 ， 包 括 字 体 、 字 号 、 凑 
色 、 衬 型 等 ， 适 当地 应 用 可 以 使 页 面 更 加 美观 。 
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font 标 签 有 3 个 属性 : face、color 和 size。 这 3 个 属性 可 以 目 由 组 合 ， 没 有 先后 顺序 。 通 
过 设置 这 3 个 标签 属性 ， 可 以 控制 文学 的 显示 效果 。 

face: 用 于 设置 文本 字体 名 称 , 可 以 用 逗号 隅 开 多 个 字体 名 称 。 例 如 : <font face = "Times 
New Roman, Times, serif">Happy New Year</font> 。 

Size: 用 于 设置 文本 字体 大 小 ， 取 值 范 围 在 -7 到 7 之 间 ， 数 凶 越 大 子 体 越 大 。 

Color: 用 于 设置 文本 闫 色 ， 可 以 用 red、white 和 green 等 助 记 符 ， 也 可 以 用 16 进 制 
数 表 示 ， 如 红色 为 "#FF0000"。 

使 用 示例 : 

<font face=" 华 文 彩 云 " size="7" color="black"> 欢 迎 光临 </font> 


上 述 语句 在 浏览 器 中 的 显示 效果 如 图 6-10 所 示 : 
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图 6-10 font 标签 示 例 效果 


2. <b>、<i >、<em>、<h#> 标 签 。 

(1) <b>...</b> 标 签 将 标签 之 间 的 文本 设置 成 粗 体 。 

例如 : Dreamweaverxsb>DIY</b> 教 程 ， 在 浏览 器 中 的 预览 效果 如 图 6-11 所 示 。 

(2) <i>.…</ 人 > 标签 将 标签 之 间 的 文本 设置 成 斜体 。 

例如 : 请 看 <i> 这 边 ! </i> 

(3) xem>...</em> 标 签 用 于 将 标签 之 间 的 文学 加 以 强调 。 不 同 的 浏览 器 效果 有 所 不 
同 ， 通 第 会 设置 成 笠 体 。 

例如 : 今天 <em> 堆 下 </emy> 五 度 ! 

上 述 三 个 例子 在 浏览 右 中 的 显示 效果 如 图 6-11 所 示 。 

(4) <h#> ... </h#> (#=1, 2, 3, 4, 5, 6) 标签 用 于 设 标 题字 体 (Header) ， 有 1 | 
标题 ， 数 学 越 大 学 体 越 小 。 标 题 将 显示 为 黑体 字 。<h#>---</h#> 标 签 日 动 插 入 一 个 空 
个 必用 <p> 标 签 青 加 衬 a i ey 人 


<h1> 这 是 一 级 标题 </h1> 

<h2> 这 是 二 级 标题 </h2> 

<h3> 这 是 三 级 标题 </h3> 

<h4> 这 是 四 级 标题 </h4> 

<h5> 这 是 五 级 标题 </h5> 

<h6> 这 是 六 级 标题 </h6> 
显示 效果 如 图 6-12 所 示 。 
3. <s>、<big>、<small >、<u> 标 签 。 
(1) <s>..…</sS> 标 签 为 标签 之 间 的 文本 加 删除 线 〈“ 即 在 文本 中 间 加 一 条 横 线 ) 。 
例如 : ”<s> 删 除 这 一 行 </s> 
(2) <big>...</big> 标 签 使 用 比 当前 页 面 使 用 的 凶 体 更 大 的 子 体 显示 标签 之 间 的 文本 。 
例如 : xfont size=3> 看 起 来 <big> 特 别 </big> 深 亮 ! </font> 
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(3) <small>…</small> 标 釜 将 使 用 比 当前 页 和 面 使 用 的 字体 更 小 的 字体 显示 标签 之 间 
的 文本 。 


这 和 古 一 级 标题 
这 是 二 级 标题 


DreamweawerDIY 教 程 这 是 三 级 标题 
下 二 


请 看 下 雄 ， 这 是 四 级 标题 


这 是 五 级 标题 
J | 
今天 委 下 卫 度 | 的 


图 6-11 标签 示例 效果 图 6-12 bh# 标 签 示 例 效 来 


例如 : 字体 < small > 小 一 些 </ small > 更 好 ! 
(4) <u>...</u> 标 签 为 标签 之 间 的 文本 加 下 划 线 。 
例如 : 今天 <u> 天 气 </u> 真 好 ! 
上 述 四 个 例子 在 浏览 器 中 预览 的 效 束 如 图 6-13 所 未 : 
4. <pre> 预 格式 化 标签 。 
默认 情况 下 ，Dreamweaver 会 将 两 个 字符 之 间 的 多 个 空格 蔡 换 为 一 个 空格 ， 然 后 在 浏 
览 器 中 显示 。<pre>...</pre> 标 签 用 于 设 定 浏览 堪 在 输出 时 ， 对 标签 内 部 的 内 容 儿 乎 不 做 修 
改 地 输出 。 
例如 ， 在 Dreamweaver 的 代码 视 图 中 输入 以 下 代码 : 
<pre> 再 别 康桥 </pre> 
周 别 康桥 
该 示例 在 浏览 右 中 的 显示 效果 如 图 6-14 上 所 示 。 
了 一生 
看 起 来 特别 漂亮 | 
字体 小 一些 更 好 | 再 别 
今天 天 气 真 好 | 再 别 康桥 


康桥 


图 6-13 ”标签 示例 效果 图 6-14 pre 标签 示例 效 末 


6. 3.4 排版 标签 


1. <br>、<p>、<hr> 标 签 。 

(1) <br> 标 签 用 于 在 文本 中 添加 一 个 换行 符 ， 它 不 需要 成 对 使 用 。 

例如 : 在 这 里 换行 <sbr> 第 二 行 ! 

(2) <p>.….</p> 标 签 用 来 分 隅 文档 的 多 个 段 洲 。 可 选 属性 “align” 有 三 个 取 值 : 
left: 段落 左 对 齐 。 

center: 段 沙 居 中 对 齐 。 

color: 段落 右 对 章 。 

例如 : < p align=center> 居 中 对 齐 </ p> 
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(3) <hr> 标 签 用 于 在 页 面 中 添加 会 条 水 平 线 。 
例如 :水平线 上 <hr> 水 平 线 下 ! 
F 述 三 例 在 浏览 器 中 的 显示 效果 如 图 6-15 所 示 : 


在 这 里 换行 
第 二 行 | 


水 平 编目 
水 平 线 下 | 


图 6-15 ”标签 示例 效果 


2. <xleft>、<right>、<center> 标 签 。 

(1) <center>...</center> 标 签 将 标签 之 间 的 文本 等 元 素 居 中 显 
例如 : 左 <center> 居 中 </center> 左 

(2) <left>.…</left> 标 签 将 标签 之 间 的 文本 等 元 隶 居 左 显 示 。 
例如 : <left> 左 对 齐 </left> 

(3) <right>...<right> 标 签 将 标签 之 间 的 文本 等 元 素质 右 显 
使 用 示例 : 右 <right > 右 对 草 </ right> 碳 

3. <sSub> 和 <sup> 标 签 。 

(1) <sub>...</sub> 标 签 将 标签 之 间 的 文本 设置 成 下 标 。 
例如 : 123 是 下 标 <sub>123</sub> 

(2) <sSup>...</sup> 标 签 将 标签 之 间 的 文本 设置 成 上 标 。 
例如 : 456 是 上 标 <sup>456</sup> 


上 述 两 例 在 浏览 器 中 的 显示 效 末 如 图 6-16 所 示 : 
123 是 下 标 ,,， 


456 是 上 标 全 


图 6-16 ”标签 示例 效果 


4. <div> 和 <span> 标 签 
(1)<div > … </div> 用 于 块 级 区 域 的 格式 化 显示 。 访 标签 可 以 把 文档 划分 为 奋 干 部 分 
并 分 别 设置 不 同 的 属性 值 ,使 同一 文字 区 式 内 的 文学 显示 不 同 的 效 束 。 币 用 于 设置 CSS 样 
式 。 其 妾 用 格式 如 下 : 
<div align = 对 齐 方式 id = 名 称 style = 样式 class = 类 名 nowrap>...</div> 
其 中 ， 对 齐 方式 可 以 为 center、left 和 right; id 用 于 定义 本 div 区 域 的 名 称 ， 用 在 动态 网 
页 编程 中 ; style 用 于 定义 样式 ; class 用 于 赋予 类 名 ; nowrap 说 明 不 能 折 行 ， 默 认 是 不 加 
nowrap， 也 就 是 可 以 折 行 。 
例如 : 
<div> 第 一 段 文 本 ， 默 认 左 对 齐 显示 </div> 
<div align = center style = "color: purple" 1d = "another"> 


第 二 段 文 本 ， 文 字 颜 色 为 入 色 ， 且 届 中 显示 。 
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</div> 


上 例 在 浏览 器 中 的 显示 效果 如 图 6-17 所 示 。 


图 6-17 Div 标 签 示 例 效果 


(2) <span>...</span> 用 于 定义 内 和 通 的 文本 容器 或 区 域 ， 主 要 用 于 一 个 段 洲 、 句 子 其 
至 单词 中 。 其 格式 为 : 

xspan id = 名 称 style = 样式 class = 类 名 >...... </span> 

<span>》 标 签 没 有 align 属 性 ， 其 他 属性 的 意义 和 <div> 标 签 类 似 , 不 再 葡 述 。<span>》 标 签 
同样 在 样式 表 的 应 用 方面 符 别 有 用 ， 它 们 都 用 于 动态 HTML。 

例如 : <span style = "color: red; font-size: 18pt">18 点 大 小 的 红色 字体 </span> 

Div 标 签 和 span 标 和 俭 的 区 别 在 于 ，div 是 一 个 块 级 元 素 ， 可 以 包含 段 洲 、 标 题 、 表 格 ， 
万 至 诸如 章 帮 、 摘 要 和 备注 等 。 而 span 是 行内 元 系 ，span 的 前 后 是 不 会 换行 的 ， 它 纯粹 是 
应 用 样式 。 下 面 以 一 个 实例 来 说 明 这 两 个 属性 的 区 别 。 

1) 新 建 一 个 HTML 文档 ， 并 设置 文档 的 背景 图 像 。 

2) 切换 到 “代码 ”视图 ， 在 <body> 和 </body> 标 签 之 间 输 入 以 下 代码 : 


<Span> 第 一 个 Span</span> 


<Span > 第 二 个 span</span> 
<Span > 第 二 个 span</span> 


<div> 第 一 个 div</div> 
<div> 第 二 个 div</divy 


<div> 第 三 个 div</div> 


3) 你 存 文件 ， 切 换 到 “设计 ”视图 ， 可 以 合 看 到 页 和 面 效 果 如 图 6-18 所 示 。 


图 6-18 Div 和 span 标 签 比 较 示例 效 琳 


6. 3.5 列表 标签 


在 HTML 中 ， 列 表 标 签 分 为 无 序列 表 、 有 序列 表 和 普通 列表 三 种 。 

1. 无 序列 表 是 指 列 表 项 之 间 没 先后 次 序 之 分 。x<ul>.…</ul> 用 来 标签 无 序列 表 的 开 
始 和 结束 。 其 标签 格式 为 : <ul>xli>...</ul>。 其 中 每 一 个 xl 标签 表示 一 个 列表 项 值 。 

例如 : 


<ul> 
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<|i> 网 页 制作 
<|i> 程 序 设计 
<|i> 网 络 管理 


</ul> 


此 例 在 浏览 器 中 的 显示 效果 如 图 6-19 左 图 所 示 。 

2. 有 序列 表 

有 序列 表 与 普通 列表 不 同 之 处 在 于 有 序列 表 存 在 序号 。<ol>...</ol> 用 于 标签 有 序列 表 
的 开始 和 结束 。 有 序列 表 有 一 个 属性 “type”， 其 值 的 功能 介绍 如 下 : 

type=1: 表示 用 数字 给 列表 项 编号 ， 这 是 默认 设置 。 

type=a: 表示 用 小 与 字母 给 列表 项 编写 。 

type=A: 表示 用 大 写字 母 给 列表 项 编号 。 

type=i: 表示 用 小 写 罗 马 字 母 给 列表 项 编号 。 

type=I: 表示 用 大 写 罗 马 字 母 给 列表 项 编号 。 
例如 : 


<O|> 


<|i> 网 页 制作 


<|i> 程 序 设计 


<|i> 网 络 管理 


</ol> 


该 示例 在 浏览 右 中 的 显示 效果 如 图 6-19 右 图 所 示 。 


* 网 页 制作 1 网 页 制作 
* 程序 设计 2 程序 设计 
。 网 络 官 理 3. 网 络 管理 


图 6-19 ”无 序列 表 和 有 序列 表 的 效果 


3. 普通 列表 “普通 列表 通过 <dl><dt>...<dd>.…</dl> 的 形式 实现 , 通常 用 于 排版 。 其 中 ， 
<dl>...</d> 标 签 用 于 创建 一 个 普通 的 列表 ; <dt>.…</dt> 用 于 创建 列表 中 的 上 层 项 目 ; 
<dd>...< /dd> 用 于 创建 列表 中 最 下 层 的 项 目 。< dt>...< /dt> 和 < dd>...< /dd> 都 必须 放 在 < 
dl>...< /dl> 标 志 对 之 间 。 

如 下 实例 代码 : 
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dat 


<dl> 
<dt> 网 页 制作 
<dd>FLASH 
<dd>FIREWORK 
<d 忆 程序 设计 
<dd>JAVASCRIPT 
<dd>VBSCRIPT 
</dl> 
上 述 代码 在 浏览 器 中 的 显示 效果 如 图 6-20 所 示 。 


网 矶 制作 
FLASH 


FIREWORK 
程序 设计 

JAVASCRIPT 

VBSCRIPT 


图 6-20 ”普通 列表 效果 


6. 3.6 表格 标签 


通过 表格 可 以 将 数据 内 容 分 门 别 类 地 显示 出 来 ， 从 而 使 网 页 显得 整齐 美观 。 在 HTML 
中 制作 表格 是 一 件 很 容易 的 事 。 
1. <table> 标 签 ” 表格 由 <xtable>...</table> 标 签 构成 。<table> 标 签 还 有 很 多 属性 用 于 探 
制 表 格 的 显示 效果 。 表 格 的 常用 参数 分 别 介绍 如 下 : 
align: 设置 表格 与 页 和 面 对齐 方式 ， 取 从 有 left、center 和 right。 
cellpadding: 设置 表格 的 一 个 单元 格 内 数据 和 单元 格 边框 间 的 边 距 ， 以 像素 为 单位 。 
cellspacing: 设置 单元 格 之 间 的 间距 ， 以 像素 为 单位 。 
<table>...</table> 用 于 标志 表格 的 开始 和 结束 。 表 格 的 沼 用 参数 分 别 介绍 如 下 : 
background: 设置 表格 的 背景 图 像 。 
bgcolor: 设置 表格 的 背景 磊 色 。 
border: 设置 表格 的 边框 。 如 末 不 设置 该 属性 ， 或 将 该 属性 的 值 议 置 为 0， 则 表示 不 显 
不 表格 的 边框 线 。 
width: 设置 表格 的 宽度 ， 单 位 默认 为 像 象 素 ， 也 以 使 用 百分比 形式 。 
height: 设置 表格 的 高 度 ， 单 位 默认 为 像 系 ， 也 以 使 用 百分比 形 却 。 
例如 ， 下 面 的 代码 绘制 了 一 个 宽 为 300 像 系 、 边 框 为 1、 背 景色 为 末 绿 色 、 边 距 均 为 2， 
有 3 行 3 列 的 表格 。 
<table width="300" border="1" cellspacing="2" cellpaddinge="2"> 
<tr> 
<td bgcolor="#99CC33">&nbsp; </td> 
<td bgcolor="#99CC33">&nbsp; </td> 
<td bgcolor="#99CC33">&nbsp; </td> 
</tr> 
<tr> 
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<td bgcolor="#99CC33">&nbsp; </td> 
<td bgcolor="#99CC33">&nbsp; </td> 
<td bgcolor="#99CC33">&nbsp; </td> 

</tr> 

<tr> 
<td bgcolor="#99CC33">&nbsp; </td> 
<td bgcolor="#99CC33">&nbsp; </td> 
<td bgcolor="#99CC33">&nbsp; </td> 

</tr> 

</table> 


上 述 代 人 码 在 浏览 硕 中 的 显示 效果 如 图 6-21 所 示 。 


图 6-21 <table> 标 签 示 例 效 果 


2. <xtr>、<td> 和 <th> 标 签 。 

(1) <tr>...</tr> 标 签 用 于 标记 表格 一 行 的 开始 和 结束 。 
<tr> 的 第 用 参数 分 别 介绍 如 下 : 
align: 设置 行 中 文本 在 单元 格 内 的 对 齐 方式 ， 取 值 有 left、center 和 right。 
background: 设置 行 中 单元 格 的 背景 图 像 。 
bgcolor: 设置 行 中 单元 格 的 背景 两 色 。 

(2)<td>...</td> 用 于 标志 表格 内 里 元 格 的 开始 和 结束 。<td> 标 签 应 位 于 <tr> 标 签 内 部 。 
<td> 的 第 用 参数 分 列 介 绍 如 下 : 
align: 设置 行内 容 在 单元 格 内 的 对 齐 方式 ， 取 值 有 left、center 和 right。 
background: 设置 单元 格 的 背景 网 像 。 
bgcolor: 设置 单元 格 的 育 孙 疝 色 。 
width: 设置 单元 格 的 宽度 ， 单 位 为 像素 。 
height: 设置 单元 格 的 高 度 ， 单 位 为 像素 。 

(3) <th>.…</th> 的 作用 与 <td> 大 致 相同 ， 主 要 用 于 标志 表格 内 表 头 的 开始 和 结束 ， 

且 其 中 的 文本 日 动 以 粗 体 显 示 。 
<th> 标 签 的 常用 属性 如 下 : 
colspan: 设置 <th>...</th> 内 的 内 容 应 该 跨越 儿 列 。 
rowspan: 设置 <th>...</th> 内 的 内 容 应 该 跨越 儿 行 。 
3. <colspan> 和 <rowspan> 标 签 。 
<colspan> 和 <rowspan> 标 签 用 于 合并 单元 格 ， 分 别 表示 哮 多 列 合 并 和 蔷 多 行 合并 。 例 
如 ， 下 面 的 代码 : 

<table width="300" border= 1] "allgn= “center ”cellpadding= 2” cellSpacing= 2 > 
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<tr> 
<th width="83" scope="col"> 名 称 </th> 
<th colspan="2" scope="col"> 参 数 </th> 
</tr> 
<tr> 
<td>123</td> 
<td width="119">qwe</td> 
<td width="70">zxc</td> 
</tr> 
<tr> 
<td>456</td> 
<td>asd</td> 
<td>fgh</td> 
</tr> 
</table> 
该 表格 包含 3 行 3 列 ， 第 一 行 设 置 了 跨 两 列 的 合并 形式 。 该 表格 在 浏览 右 中 的 效果 如 图 
6-22 上 所 示 。 


图 6-22 ”表格 合并 列 的 效果 


6. 3. 7 框架 标签 


框架 将 网 页 页 面 分 成 几 个 窗口 ， 不同 的 窗口 可 链接 不 同 的 URL。 一 个 页 面 中 的 所 有 框 
染 标签 要 放 在 一 个 总 的 html 文 档 中 ， 这 个 文档 只 记录 了 该 框架 是 如 何 划 分 的 ， 而 不 会 显示 
任何 其 他 的 资料 ， 所 以 不 必 放 入 <body> 标 签 中 。 在 浏览 右 中 预 筑 框架 页 面 时 ， 必 须 先 读 取 
这 个 html 文 档 。 

1. <frameset> 标 签 ” <frameset>...</frameset> 标 签 用 于 在 页 和 面 中 创建 可 以 在 同一 浏览 右 
口中 显示 多 个 网 页 的 区 域 。<frameset> 标 签 在 多 窗口 页 和 面 中 的 地 位 就 相当 于 <body> 在 普 
通 单 窗 口 页 面 中 的 地 位 ， 在 页 面 中 用 <frameset>...</frameset> 标 志 页 面 主 体 部 分 的 起 止 位 
置 。 同 时 ，<frameset> 标 签 决定 了 如 何 划 分 窗口 ， 以 及 每 个 窗口 的 位 置 和 大 小 。 

<frameset>.…</frameset> 标 签单 用 的 属性 介绍 如 下 : 

rows: 用 于 分 制 上 下 窗口 ， 大 小 用 占 窗 口 高 度 的 百分比 ， 或 像素 值 表示 。 

cols: 用 于 分 割 左右 窗口 ， 大 小 用 占 窗口 党 度 的 百分比 ， 或 像素 值 表示 。 

frameborder: 用 于 设置 框 染 是 否 有 边框 ， 取 值 为 yes 或 no。 

border: 用 于 设置 框架 边框 的 厚度 。 

Framespacing; 设 定 框架 与 框架 间 的 保留 空白 的 距离 ， 默 认 值 是 0。 
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常见 框架 子 窗口 的 划分 方式 有 两 种 : 自分 比划 分 方式 和 像素 值 划分 方式 。 用 百分比 方 
式 划 分 时 ， 将 框架 的 各 子 域 授 其 占 上 一 级 父 区 域 大 小 的 白 分 比 来 划分 。 如 有 下 面 的 代 公 : 


<frameset rows=30%,*> 


<frame src="Acol.html" frameborder=1> 
<frameset cols=30%,*> 
<frame src="Bcol.html" frameborder=0> 
<frame src="Ccol.html" frameborder=0> 
</frameset> 
</frameset> 
上 面 的 代码 表示 将 窗口 划分 为 上 下 两 部 分 ， 上 部 分 占 整 个 窗口 高 度 的 30%， 下 部 分 占 
整个 窗口 高 度 的 70%。 然 后 将 下 部 分 的 窗口 分 为 左右 两 个 子 窗 口 ， 左 右 子 窗口 分 别 占 下 窗 
口 宽度 的 30% 和 70%。 如 图 6-23 所 示 。 


Dw Wm 0» Ek 
和 Hy 天 章 17) 


nA 
ns -A 


和 
Bb wolrelelhl * 


图 6-23 ” 按 百 分 比划 分 窗口 的 效果 


按 像 系 值 大 小 划分 框 染 时 ， 框 染 中 的 各 子 区 域 按 照 指 定 的 像素 值 来 设 趾 各 子 区 域 窗口 
的 大 小 。 例 如 下 面 的 代码 : 


<frameset rows=60，600> 


<frame src=" Acol.html" frameborder=1> 
<frameset cols=80,*> 
<frame src="Bcol.html" frameborder=0> 
<frame src="Ccol.html" frameborder=0> 
</frameset> 
</frameset> 
上 上面 的 代 但 先 将 窗口 分 为 上 下 两 部 分 ， 上 窗口 的 局 上 度 为 60 像 素 ， 下 窗口 的 高 度 为 600 
像素 ; 然后 将 下 窗口 分 为 左右 两 个 子 窗口 ， 左 子 窗口 的 宽度 为 80 像 素 ， 其 他 的 部 分 为 厂子 
窗口 。 
2. <frame> 标 签 ” 用 <frameset> 标 签 把 窗口 分 割 好 后 ， 各 子 窗口 的 属性 用 HTML 的 
<frame> 标 签 来 定义 ， 所 以 <frameset> 标 签 中 必须 包含 <frame> 标 签 ， 用 以 定义 名 子 窗口 的 
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属性 。 

<frame> ... </frame> 标 签 的 党 用 属性 介绍 如 下 : 

name: 用 于 设置 框架 名 称 。 

scrolling: 用 于 设置 框架 是 否 有 深 动 条 ， 取 值 为 yes 有 深 动 条 ， 取 值 为 no 则 没有 滚动 
取 值 为 auto 则 根据 需要 目 动 设置 ， 稚 认 值 是 auto。 

src: 用 于 指定 该 框架 的 HTML 等 页 面 文件 ， 知 不 设 此 参数 则 框架 内 没有 内 容 。 

通过 设置 每 个 子 区 域 的 src 属 性 值 ， 可 以 在 不 同 的 子 窗 口中 打开 不 同 的 页 和 面 。 例如 下 面 
的 代码 : 


<frameset rows="59,*" cols="*" frameborder="no" border="0" framespacins="0"> 


洽 


<frame src="top.html” name= topFrame” frameborder="yes" scrollng="No" 
noresize="noresize" 1d="topFrame" title="topFrame" /> 
<frameset cols=" 80,*" frameborder="no" border="0" framespacing="0"> 
<frame Src= change.html” name="leftFrame" frameborder= yes” scrolling="No" 
noresize="noresize" 1d="leftFrame" title="leftFrame" /> 
<frame src="sici.html" name= mainFrame” frameborder= "yes” scrolling="yes" 
1d="maimnFrame" title="mainFrame" /> 
</frameset> 
</frameset> 
上 述 代码 将 窗口 进行 划分 后 , 分 别 为 每 个 子 窗 口 命名 ,并 链接 相应 的 页 面 文件 。 此 外 ， 
还 为 右 下 的 子 贸 口 设 章 了 深 动 条 。 最 终 效 末 如 图 6-24 所 未 。 


/ 观 书 有 感 
半 亩 方 塘 一 览 开 
天 光 云 影 共 徘徊 
问 渠 那 得 清 如 许 


-----------------------oococcocccccocceococoeocoeeeooeoeececeeeeoeeceoooeeeoceeoeeeeeeeoeeeeeeeoeoeoeoeoeeoeoeeeoeeeeeececeoeoeoeoeeeeeeooooooooooooooot-- -2 


[Ry RQ foo% vl607 x 321vI1KAI1 秒 


图 6-24 ”框架 效果 
3. <noframe> 标 签 <nofrfame>...<mmoframe> 标 签 用 于 设置 当 浏 览 器 不 支持 框架 技术 时 
显示 的 文本 。 通 津 的 做 法 是 在 此 标签 之 间 放 置 提示 用 户 浏 览 器 不 文 持 框 染 的 信息 。 例 如 下 
面 的 代码 : 


<frameset rows=30%,*> 


<frame src="Acol.html" frameborder=1> 
<frameset cols=30%,*> 
<frame src="Bcol.html" frameborder=0> 


<frame src="Ccol.html" frameborder=0> 
<noframe> 对 不 起 ， 您 的 浏览 器 不 支持 框架 。</noframe> 
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</frameset> 

</frameset> 

上 而 的 代码 首 先 划 分 了 窗口 , 如 果 用 户 的 浏览 右 不 文 持 框架 技术 , 则 用 户 看 到 的 是 “对 
不 起 ， 您 的 浏览 器 不 文 持 框架 ”。 

4. <iframe> 标 签 <iframe > ... </iframe> 标签 用 于 在 网 页 中 设置 浮动 帧 网 页 。 和 党 用 的 
主要 属性 有 src 和 name 必 性。 其 中 属性 src 用 于 议 置 浮动 蚌 的 初始 页 面 的 URL。name 属 性 用 
于 设置 浮动 帧 窗口 的 标识 名 称 ， 如 下 例 代 伍 : 


<lframe Src= "yulinling.html] ”name= "window "> 


Here 1s a Floating Frame 

</iframe> 

<br> <br> 

<a href="dingfengbo.html" target="window">Load A</A><BR> 

<a href="hechongtian.html" target="window">Load B</A><BR> 

<a href="yebanle.html" target="window" >Load C</A><BR> 

如 果 用 户 的 浏览 右 不 支持 框 染 找 术 , 则 显示 <iframe>...</iframe> 标 签 则 的 文学 “Here is 
a Floating Frame”; 如 果 文 持 ， 则 显示 <iframe> 标 签 的 Src 属 性 指定 的 页 面 。 点 击 Load A、 
Load B 或 Load C 文 字 链 接 ， 则 在 浮动 帧 区 域 中 显示 相应 的 链接 文件 ， 如 图 6-25 所 示 。 


机 夜半 乐 
塞 星 天 切 对 长 京 晚 ， 了 又 乱 扁 身 一 叶 ， 


都 门 巾 饮 无 绪 ， 
留 普 处 、 兰 年 公众。 
“3 


图 6-25 ”iframe 标 签 示 例 效果 


6. 3. 8 表单 标 从 


表单 是 HTML 文档 中 用 于 向 用 户 显 示 信 息 ， 同 时 获取 用 户 输 入 信息 的 界面 。 当 数据 答 
入 完毕 后 ， 单 击 “ 提 交 ” 按 钮 ， 即 可 将 表单 内 的 数据 提 区 到 服务 器 ， 服 务 器 关 根 据 输入 的 
数据 做 相应 的 处 理 。 表 单 的 应 用 相当 广泛 ， 登 录 注 册 、 网 上 查询 等 功能 都 离 不 开 表 单 。 

表单 中 有 多 种 表单 控件 对 象 ， 如 文本 框 、 复 选 枉 、 单 选 按 钮 等 。 每 个 表单 以 <form> 标 
签 开 始 ， 以 </form> 结 束 ， 表 单 中 的 各 种 表单 对 象 都 要 放 在 这 两 个 标签 之 间 。 

1. <form> 标 签 <form>...</form> 标 签 用 于 表示 一 个 表单 的 开始 与 结束 ， 并 用 通知 服 
务 器 处 理 表 单 的 内 容 。 其 参数 分 别 介绍 如 下 : 

name: 用 于 指定 表单 的 名 称 。 

action: 指定 提交 表单 后 ， 将 对 表单 进行 外 理 的 文件 路 径 及 名 称 〈 即 URL) 。 

method: 用 于 指定 发 送 表 单 信息 的 方式 ， 有 GET 方式 (通过 URL 友 送 表单 信息 ) 和 
POST 方式 (通过 HTTP 发 送 表 单 信息 ) 。POST 方式 适合 传递 大 量 数 据 ， 但 速度 较 慢 ; 
GET 方式 适合 传送 少量 数据 ， 但 速度 快 。 
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有 一 


《文本 域 表 单 对 象 ， 在 文本 框 中 显示 文字 ) 或 type=password〔 密 人 码 域 表单 对 象 ， 在 文本 框 


2. <input> 标 签 、<inpufs 标 俭 用 于 在 表单 内 放生 表单 对 象 。 此 标签 不 需 成 对 使 用 。 


个 type 属 性 ， 对 于 不 同 的 tfype 属 性 值 ，<input> 标 签 有 不 同 的 属性 。 例 如 ， 当 type=text 


中 显示 * 号 代 谷 输入 的 文字 ， 起 保密 作用 ) 时 <input> 标 签 的 属性 如 下 : 


size: 文本 框 在 浏览 喜 的 显示 宽度 ， 实 际 能 得 入 的 字符 数 由 maxlength 参数 决定 。 
maxlength: 在 文本 框 最 多 能 输入 的 字符 数 。 


当 type=submit〈 提 交 按 钮 ， 用 于 提交 表单 ) 或 type=reset〈 重 置 按 钮 ， 用 于 清空 表单 中 


用 户 已 输入 的 内 容 ) 时 xinput> 标 签 的 属性 如 下 : 


选 钮 name 属性 相同 ) 中 最 多 只 
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value: 在 按钮 上 显示 的 标签 。 
当 type=radio 〈 单 选 钮 ) 或 type=checkbox 〈 复 选 钮 ) 时 xinput> 标 签 参数 介绍 如 下 : 
value: 用 于 议定 单 选 钮 或 复 选 钮 的 但。 


checked: 可 选 参数 ， 若 带 有 a 则 默认 状态 下 该 按钮 是 选中 的 。 同 一 组 radio 单 
一 个 单 选 钮 市 checked 属性 。 复 选 钮 则 无 此 限制 。 


0 =image 《图 像 ) Si 数 介 绍 如 下 : 
c: 图 像 文 件 的 名 称 。 
alt: 图 像 无 法 显示 时 的 替代 文本 。 
align: 图 像 对 象 的 对 齐 方式 ， 取 值 可 以 是 top、left、bottom、middle 和 right。 
下 面 通过 一 段 简 单 的 HTML 代码 演示 <input> 标 签 的 使 用 方法 。 代 但 如 下 : 
<form actton=loglin_action.jSp method=POST> 
姓名 : <input type=text name= 姓 名 Size=16><br> 
密 但 : <input type=password name= 密 人 size=16><br> 


性 别 : <input name="radiobutton" type="radio" value="radiobutton"> 男 

<input name="radiobutton" type="radio" value="radiobutton"> 女 <br> 

爱好 : <input type="checkbox" name="checkbox" value="checkbox"> 运 动 

<input type="checkbox" name="checkbox2" value="checkbox"> 首 乐 <br> 

图 像 :， <input name="imageField" type="image" src="dd.gif" width="16" 

height="16" border="0"><br> 

<input type=submit value=" 发 送 "><input type=reset value='" 重 设 "> 

</form> 


上 述 代 码 在 浏览 器 中 的 显示 效果 如 图 6-26 所 示 。 


姓名 : 


密码 : 
性 别 ， 曲 男 口 女 
爱好 ， 国 运动 国 音 乐 


[发送 | | 重 设 | 


图 6-26 input 标签 的 示例 效果 


3. xselect> 和 和 <option> 标 签 ” <select>...</select> 标 签 用 于 在 表单 中 插入 一 个 列表 框 对 
象 。 它 和 <option></option> 标 签 一 起 使 用 ,<option> 标 签 用 于 为 列表 框 添 加 列表 项 。<select> 
标签 的 常用 属性 简要 介绍 如 下 : 

name: 指定 列表 框 的 名 称 。 

size: 指定 列表 框 中 显示 多 少 列表 项 〈 行 ) ， 如 有 条 列表 项 数目 大 于 size 参数 值 ， 那 么 
通过 深 动 条 来 深 动 显示 。 

multiple: 指定 列表 框 是 否 可 以 选中 多 项 ， 默 认 下 只 能 选择 一 项 。 

<option> 标 签 的 参数 有 两 个 可 选 参数 ， 介 绍 如 下 : 

selected: 用 于 设 定 在 初始 时 本 列表 项 是 被 默认 选中 的 。 

value: 用 于 设 定 本 列表 项 的 值 ， 如 果 不 设 此 项 ， 则 默认 为 标签 后 的 内 容 。 

在 Dreamweaver 的 “代码 ”视图 的 <body>...</body> 标 签 之 间 输 入 以 下 代码 : 


<form action=none.jsp method=POST> 


<select name=fruits size=3 multiple> 
<option selected> 足 球 
<option selected> 监 球 
<option value=MVy_Favorite> 乒 乓 球 
<option> 羽 毛 球 
</select> <p> 
<input type=submit> <input type=reset> 
</form> 

保存 文档 ， 按 F12 键 在 浏览 器 中 查看 显示 效果 ， 如 图 6-27 所 未 。 

4. <textarea> 标 签 ”<textarea>...</textarea> 标 签 的 作用 与 <input> 标 签 的 type 属 性 值 为 
text 时 的 作用 相似 ， 不 同 之 处 在 于 ，<textarea>》 显示 的 是 多 行 多 列 的 文本 区 域 ， 而 <input> 文 
本 框 只 有 一 行 。<textarea> 和 </textarea> 之 间 的 文本 是 文本 区 域 的 初始 文本 。<textarea> 标 签 
的 党 用 属性 如 下 : 

name: 指定 文本 区 域 的 名 称 。 

rows: 文本 区 域 的 行 数 。 

cols: 文本 区 域 的 列 数 。 

wrap: 用 于 设置 是 奋 目 动 换行 ， 取 值 有 off 不 换行 ， 是 默认 设置 ) 、soft( 软 换行 》 
和 hard〈 便 换行 ) 。 

在 Dreamweaver 的 “代码 ”视图 的 <body>...</body> 标 签 之 间 输 入 以 下 代码 : 

<form action=/none.jsp method=POST> 


<textarea name=comment rows=5 cols=20> 

在 这 里 输入 要 得 询 的 内 容 

</textarea> 

<br> 

<input type=submit> <input type=reset> 
</form> 


保存 文档 ， 控 F12 键 在 浏 贤 带 中 预 帘 显 示 效 果 ， 如 图 6-28 所 示 。 
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在 这 里 输入 要 查询 的 内 
容 


[提交 ] [ 重 置 


图 6-27 示例 效 霖 图 6-28 示例 效 末 


6. 3.9 其 他 标 釜 


. 《<img> 标 签 ” 图 像 可 以 使 页 面 更 加 生动 美观 ，、 富 有 生机 。 在 HTML 文 档 中 插入 图 
tt 该 标签 除 src 属 性 是 不 可 缺 省 的 以 外 ， 其 他 属性 均 为 可 选项 。 其 属 
性 如 下 所 示 : 

src: 用 于 指定 要 插入 图 像 的 地 址 和 名 称 。 

alt: 用 于 设置 当 图 像 无 法 显示 时 的 督 换 文本 ， 或 载 入 图 像 后 ， 将 光标 移 到 图 像 上 时 显 
示 的 提示 文本 。 

align: 用 于 设置 图 像 和 页 和 面 其 他 对 和 象 的 对 齐 方式 ， 取 值 可 以 是 top，middle 和 bottom。 

border: 用 于 设置 图 像 的 边框 厚度 ， 以 像素 为 单位 。 

vspace: 用 于 设置 图 像 与 其 他 图 像 或 页 面 对 象 的 牌 直 边 距 ， 以 像素 为 单位 。 

hspace: 用 于 设置 图 像 与 其 他 图 像 或 页 面 对 象 的 水 平 边 距 ， 以 像素 为 单位 。 
width 和 height: 用 于 设置 独 片 的 宽度 和 凯 度 。 

使 用 示例 : 

<lmg src="new.gif" width="20" height="20" border="1"> 
<img> 标 签 还 可 用 于 在 网 页 中 插入 影像 户 断 ， 例 如 : 
<lmg STc= url.glif ”dynsrc= "url.avl > 
Dynsrc: 设置 播放 视频 的 AVI 文件 。 例 如 上 面 的 语句 使 用 url.avi 文件 来 播放 。 

Src: 指定 作为 视频 的 封面 的 图 瞩 。 例如 上 和 面 的 语句 指定 用 urlgit， 即 : 在 浏览 磺 疝 未 
完全 读 入 AVI 文件 时 ， 先 在 AVI 播放 区 域 显示 url.gif。 

Start: 设置 何 时 开始 播放 AVI。 其 值 为 fleopen, mouseover， 且 默认 值 是 #=fileopen， 
即 在 链接 到 含 本 标签 的 页 面 时 开始 播放 AVI; 而 mouseover 是 指 当 把 光标 移 到 AVI 播放 
区 域 之 上 时 才 开 始 播 放 AVI， 例 如; 

<lmg src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" start=mouseover> 

用 户 也 可 以 同时 设置 两 者 ， 例 如 : ximg start=fileopen,mouseover>。 

Controls: 用 于 在 视频 窗口 下 附加 MS 一 WINDOWS 的 AVI 播放 控制 条 。 

例如 : <imeg src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls> 

Loop: 设置 循环 播放 。 

例如 : <imsg src="SAMPLE-S.GIF"” dynsrc="SAMPLE-S.AVI" loop=3> 表 示 循 环 播放 3 
次 。 

2. <a? 标 签 ”、HTML 最 显 车 的 优点 就 在 于 它 文 持 文 档 的 超级 链接 ， 可 以 很 方便 地 在 不 
同文 档 以 及 同一 文档 的 不 同位 置 之 间 跳 转 。HTML 是 通过 链接 标签 <a> 实 现 超级 链接 的 。 
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<a> 标 签 定 封闭 性 标签 ， 其 起 止 标签 之 间 的 内 容 即 为 锁 标 。<a> 标 签 有 两 个 不 能 同时 使 用 的 
属性 href 和 name， 此 外 还 有 target 属 性 等 ， 分 别 介 绍 如 下 : 

(1) href 用 于 指定 目标 文件 的 URL 地 址 或 页 内 销 点 。 当 超级 链接 的 一 个 起 点 要 链接 
到 锁 点 时 ， 应 采用 如 下 的 格式 : 

<a ”herf="#...">...</a>。herf 属 性 值 的 # 写 后 的 省 略 号 为 命名 销 点 的 名 字 。<a> 标 签 使 
用 此 属性 后 ， 在 浏览 器 中 单 击 镭 标 ， 页 面 将 跳 转 到 指定 的 页 面 或 本 页 中 指定 的 销 点 位 置 。 
例如 : 

<a href="url"> 点 击 这 里 </a><br> 

表示 当 单 击 链接 文本 “点 击 这 里 ”时 ， 会 打开 url 所 指 回 的 文件 页 面 。 

<aherf="http:Wwww.tom.cormyabc/002.htm#abc"> 锁 点 </a> 

表示 当 点 击 链接 起 点 文字 “ 销 点 ”时 ， 将 会 打开 http://www.tom.com/abc/002.htm 文 件 ， 
并 定位 到 该 页 面 中 命名 为 abc 销 点 的 特定 位 置 。 

(2) name 用 于 标识 一 个 目标 ， 该 目标 终点 是 一 个 文件 中 指明 的 特定 的 地 方 。 这 种 链 
接 的 终点 就 称 为 命名 锚 点 。 

例如 : <a name="name">text</a> 

(3) target: 用 于 设 定 打开 新 页 和 面 所 在 的 目标 窗口 。 如 来 当前 页 面 使 用 了 框架 技术 ， 
还 可 以 把 target 设置 为 框架 名 。 

例如 : <a herf="http://www.tom.com/abc/002.htm#abc"” tarset=main> 锚 点 链接 </a> 

表示 当 点 击 链接 起 点 文字 “ 锁 点 链接 ”时 ， 将 链接 的 页 面 在 名 为 main 的 框架 中 打开 。 

3. “meta> 标 签 “meta> 标 签 是 实现 元 数据 的 主要 标签 ， 它 能 够 提供 文档 的 关键 字 、 
作者 、 摘 述 等 多 种 信息 ， 在 HIML 的 头 部 可 以 包括 任意 数量 的 smeta> 标 签 。<meta> 标 签 是 
非 成 对 使 用 的 标签 ， 它 的 参数 介绍 如 下 : 

name: 用 于 定义 一 个 元 数据 属性 的 名 称 。 

content: 用 于 定义 元 数据 的 属性 值 。 

scheme: 用 于 解释 元 数据 属性 人 的 机 制 。 

http-equiv: 可 以 用 于 蔡 代 name 属性 ，HTTP 服务 器 可 以 使 用 该 属性 来 从 HITP 啊 应 
头 部 收集 信息 。 

charset: 用 于 定义 文档 的 字符 解码 方式 。 使 用 示例 : 


<meta name = "keywords" content = "comey 制 作 "> 


<meta name = "description" content = "comey 人 制作 "> 

<meta http-equiv="Content-Type" content="text/htm!l; charset=gb2312 ”> 

4. <link> 标 签 ” 也 称 作 外 部 样式 表 ， 它 是 把 CSS 写 到 一 个 扩展 名 为 CSS 的 文件 中 ， 主 
要 用 于 多 个 页 面 排版 风格 的 统一 控制 ， 避 免 对 单个 页 面 重复 地 设置 CSS 样 式 。<link> 是 一 
个 韭 封闭 性 标签 ， 只 能 在 <head>...</head> 中 使 用 。 

<link> 标 签 定义 了 文档 之 间 的 包含 。 在 HTML 的 头 部 可 以 包含 任意 数量 的 <link> 标 签 。 
<link> 标 签 市 有 很 多 参数 ， 下 和 面 介绍 的 是 一 些 第 用 的 参数 : 

href: 用 于 设 荀 链接 资源 万 在 的 URL。 

title: 用 于 描述 链接 关系 的 字符 串 。 

rel: 用 于 定义 文档 和 所 链接 资源 的 链接 关系 , 可 能 的 取 什 有 Alternate, Stylesheet, Start， 
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Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, 
Help 和 Bookmark 等 。 如 果 希 望 指定 不 止 一 个 链接 关系 ”可 以 在 这 些 值 之 间 用 空格 隔 开 。 
rev: 用 于 定义 文档 和 所 链接 资源 之 间 的 反问 关系 。 其 可 能 的 取 值 与 rel 属性 相同 。 

例如 ，<link rel="Shortcut Icon" href= "soim.ico">， 表 示 将 浏览 器 地 址 栏 里 面 的 e 图 标 符 
换 为 href 属 性 指向 的 图 标 ， 当 收藏 该 页 时 候 ， 收 藏 夹 里 的 图 片 也 将 随 之 改变 。 

<link href="css.css" rel="stylesheet" type='"textcss"> 表 示 把 文档 和 一 个 CSS 文 档 连 接 起 
来 ， 在 网 页 中 应 用 css.css 文 件 作为 其 外 部 样式 。 

5. <base> 标 签 ” 是 一 个 非 封 闭 性 的 基 链 接 标 签 ， 定 义 文档 的 基础 URL 地 址 。 在 文档 
中 所 有 的 相对 地 址 形式 的 URL 都 是 相对 于 这 里 定义 的 URL 而 言 的 。 一 篇 文档 中 的 <base> 标 
签 不 能 多 于 一 个 ,必须 定义 在 标签 shead> 与 </head> 之 间 , 并 且 应 该 在 任何 包含 URL 地 址 的 
语句 之 朋 。<base> 标 签 的 属性 和 侧 要 介绍 如 下 : 

href: 指定 了 文档 的 基础 URL 地 址 。 该 属性 在 <base> 标 签 中 是 必须 存在 的 。 

target: target 属性 同 框 架 一 起 使 用 ， 它 定义 了 当 文 档 中 的 链接 被 点 击 后 ， 在 哪 一 个 框 
涤 集中 展开 页 面 。 如 末 文 档 中 超级 链接 没有 明确 指定 展开 页 面 的 目标 框 和 保 集 ， 则 使 用 这 里 
定义 的 地 址 代替 。 

例如 ， 如 果 在 HIML 文 档 的 头 部 定义 了 <base href = http://www.microsoft.com 
target="_blank">， 则 单 击 链接 <a href="document.html”target="_self">document</a>， 将 打 
开 http://www.microsoft.com/document.htm1 文 件 , 也 就是 在 相对 路 和 任 的 文件 前 加 上 基 链 接 指 
癌 的 地 址 。 如 果 目 标 文 件 中 的 链接 没有 指定 target 属 性 ， 束 用 base 标 签 中 的 target 必 性 。 

6. <bgsound> 标 签 ” 用 于 在 网 页 中 添加 背景 音乐 。 其 音 用 到 src 和 1loop 两 个 属性 。 

其 中 ，src 属 性 用 于 设置 所 加 载 的 背景 音乐 的 URL 地 址 ; loop 属 性 用 于 设置 背景 音乐 播 
放 的 循 坏 次 数 ， 当 其 属性 值 设 萤 为 -1 时 表示 否 景 无 限制 循环 播放 ， 全 到 页 面 被 关闭。 

例如 ，<bgsound src="sound.wav" loop=3></bgsound> 表示 添加 网 页 相同 目录 下 的 
sound.wav 文 件 作 为 背景 首 乐 ， 并 设置 循环 播放 次 数 为 3 次 。 

7. <style> 标 签 <style>...</style> 标 签 用 于 在 网 页 当前 文档 中 创建 样式 ， 也 叫 能 入 样 
式 表 ， 它 把 CSS 直 接 写 入 到 HTML 的 head 部 分 ， 这 是 CSS 最 为 典型 的 使 用 方法 。 

在 <style> 标 签 中 可 以 创建 多 个 不 同 的 命名 样式 。 文 档 内 容 可 以 丰 接 运用 这 些 定义 好 的 
样式 ， 例 如 : 

«<style type="text/css"> 

<1-- 

body { 

background-1mage: url(2004116234509589.g1f); 


background-repeat: repeat; 


} 
a:link { 
color: #006600; 


text-decoration: none:; 


} 


a:visited { 
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text-decoration: none: 
color: #660000; 
} 
a:hover { 
text-decoration: none; 
} 
a:active { 
text-decoration: none:; 
color: #0000FF: 
} 
--> 
</style> 
在 上 和 面 的 代码 中 ，<style> 标 签 定 义 了 5 个 样式 。 分 别 用 于 设置 负面 背景 图 像 、 未 访问 
过 的 链接 颜色 、 已 访问 过 的 链接 颜色 、 当 前 链接 和 活动 链接 颜色 。 如 采 要 在 文本 中 应 用 上 
述 样式 ， 可 以 在 文学 修饰 标签 中 应 用 class 属 性 和 属性 值 。 例 如 : 
<font class=a:active> 我 的 主页 </font> 
8. <marguee> 字 大 标签 ”<marquee> ... </marquee> 标 签 用 于 在 页 面 中 设置 滚动 字 医 。 
其 党 用 的 属性 如 下 : 
> ”direction: 用 于 设置 凶 舌 的 深 动 方 辐 ， 属 性 值 可 设置 为 left 和 right。 
>  ” behaviorscroll: 用 于 设置 字 疾 的 滚动 方式 ， 属 性 值 可 设置 为 slide、alternate。 
> ”loop: 用 于 设置 学 硕 的 深 动 时 的 循环 次 数 ， 属 性 值 可 设置 为 整数 ， 夺 未 指定 则 循 
环 不 止 Cinfinite) 。 
> scrollamount: 用 于 设置 字 竹 滚动 的 速度 ， 属 性 值 为 整数 。 
> ”scrolldelay: 用 于 设置 字幕 滚动 的 延 久 时间， 属性 值 为 整数 。 
例如 : 
<marquee loop=3 width=50% behavior=slide scrolldelay=500 scrollamount=100> 交 网 以 
无 意 吹 起 ! </marquee> 


6.4 CSS 样 式 


在 网 页 制作 过 程 中 ， 可 能 经 钊 需要 在 多 个 文档 中 应 用 一 些 相 同 的 、 复 杂 的 段落 或 字符 
特效 ， 并 且 还 要 授 入 某 种 样式 的 图 像 效 果 。 使 用 CSS 样 式 可 以 轻松 解决 这 个 问题 。 

CSS 是 一 组 能 控制 文档 范围 内 文本 外 观 的 格式 化 属性 集合 ， 是 一 个 包含 了 一 些 CSS 标 
签 ， 以 .css 为 文件 名 后 级 的 文本 文件 。 它 是 一 种 设计 网 页 样式 的 工具 ， 在 标准 的 网 页 设计 
中 人 负责 网 页 内 容 (XHTMD) 的 表现 。 与 传统 的 HTML 样 式 相 比 ，CSS 样 式 有 以 下 特点 : 

1. 将 格式 和 结构 分 离 ”利用 CSS 样 式 ， 不 必 再 把 索 杂 的 样式 定义 编写 在 文档 中 ， 可 以 
将 所 有 有 天文 档 的 样式 全 部 脱离 出 来 ， 在 行 定义 ， 在 标题 中 定义 ， 甚 至 作为 外 部 样式 文件 
供 HTML 调 用 ， 控 制 多 篇 文档 的 文本 格式 ， 具 有 很 好 的 易 用 性 和 扩展 性 ， 同 时 HTML 仍 可 以 
你 持 简 单 明 了 的 特性 。 
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2. 以 前 所 未 有 的 能 力 控 制 页 面 布 局 HTML 语 言 对 页 面 总 体 上 的 控制 很 有 限 ， 如 精 
确定 位 、 行 间距 或 学 间距 等 ， 而 这 些 控 制 通过 CSS 可 轻松 实现 。 

3. 制作 体积 更 小 ， 网 页 下 载 更 快 CSS 只 是 简单 的 文本 ， 它 不 需要 图 像 ， 不 需要 执行 
程序 ， 不 需要 插件 。 使 用 层 装 样式 表 可 以 减少 表格 标签 及 其 他 加 大 HTML 体 积 的 代码 ， 减 
少 图 像 使 用 量 从 而 控制 文件 大 小 。 

4. 轻松 地 同时 更 新 多 个 网 页 ”在 没有 CSS 的 时 代 , 如 果 想 更 新 整个 站 点 中 所 有 主体 文 
本 的 字体 ， 就 必须 一 页 一 页 地 修改 网 页 ， 费 时 且 容 易 出 错 。 而 CSS 主 旨 就 是 将 格式 和 结构 
分 离 ， 网 页 设计 者 可 以 将 站 点 上 所 有 的 网 页 都 指 问 单一 的 一 个 CSS 文 件 ， 只 要 修改 CSS 文 
件 中 的 某 一 行 ， 那 么 整个 站 点 都 会 随 之 发 生 改 变 。 

5. 民 好 的 莱 容 性 ”CSS 的 代码 有 很 好 的 兼容 性 ， 也 就 是 说 ， 即 使 某 些 用 户 的 浏览 右 不 
文 持 CSS， 在 浏览 采用 了 CSS 的 网 页 时 , 浏览 器 会 忽略 CSS 定 义 的 格式 ， 从 而 不 影响 用 户 浏 


ay 
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Dreamweaver CS6 提 供 了 对 CSS 样 式 创 作 的 完美 文 持 , 无 需 编写 代 人 码 即 可 实施 CSS 最 
佳 做 法 。 用 户 可 以 直接 在 “属性 ”面板 中 新 建 CSS 规则 ， 并 在 样式 级 联 中 清晰 、 人 简单 地 
显示 每 个 属性 的 相应 位 置 ， 从 而 可 以 更 方便 地 为 元 素来 控制 和 删除 样式 。 

在 Dreamweaver CS6 中 ， 执 行 “ 窗 口 ”/“CSS 样 式 ” 命 令 ， 即 可 打开 “CSS 样 式 ” 奇 
板 ， 如 图 6-29 所 示 。 


[全 部 [当前 
所 有 规则 


(未 定义 样式 ) 


:于 Az4[##+ 放 é3 们 


图 6-29 “CSS 样式” 浮动 面板 


在 浮动 面板 上 可 以 选择 两 种 模式 的 视图 ， 选 择 “ 全 部 ”模式 ， 则 列 出 整 份 文件 的 CSS 
规则 和 属性 ; 选择 “当前 ”模式 ， 则 显示 当前 选取 页 面 元 系 的 CSS 规则 和 属性 。 


6.4.1 基本 语法 规范 


CSS 是 一 种 对 Web 文 档 添 加 样 陈 的 简单 机 制 ， 属 于 表现 层 的 布局 语言 。CSS 样 陈 的 定 
义 代 码 一 般 书 写 在 HIMEL 文 档 的 头 部 ， 通 香 由 一 系列 的 样式 规则 组 成 ， 以 告诉 浏览 右 如 何 
呈现 一 个 文档 。 将 样式 规则 加 入 到 HTML 文 档 中 有 很 多 方法 ， 最 简单 的 局 动 方法 是 使 用 
HTML 的 <style> 标 签 。 

CSS 样 式 表 每 个 规则 的 组 成 包括 一 个 选择 器 (通常 是 一 个 HTML 的 元 素 , 例如 body、Pp 
或 em) 和 该 选择 器 有 所 接受 的 样式 。 定 义 一 个 元 素 可 以 使 用 多 个 属性 ， 每 个 属性 带 一 个 值 ， 
共同 描述 选择 器 应 该 如 何 呈 现 。 样 式 规则 组 成 如 下 所 示 : 
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选择 器 {属性 1: 值 1; 属性 2: 值 2} 
下 和 耐看 一 个 典型 的 CSS 语 句 ]: 
p {COLOR:#FF0000:BACKGROUND:#FFFFFF)} 
其 中 ，p 称 之 为 “选择 器 ”(selectors)， 用 于 指明 该 语句 是 要 给 p 定 义 样式 ， 一 对 大 括号 
人 用 于 样式 声明 ; 大 括号 中 的 COLOR 和 BACKGROUND 称 为 “属性 ”(property)， 不 同属 
性 之 间 用 分 号 分 隔 ; 三 F0000 和 #FEFFFFF 是 属性 的 值 (value)。 
单一 选择 占 的 复合 样式 声明 应 该 用 分 号 阳 开 。 例 如 ， 以 下 是 一 段 定义 了 Hl 和 H2 元 素 
的 需 色 和 字体 大 小 属性 : 
<HEAD> 
<TITLE> 第 一 个 CSS 例 子 </TITLE> 
<STYLE 工 YPE=' text/css > 


HI1 { font-size: x-large; color: red |} 


H2 { font-size: large; color: blue } 


</STYLE> 
</HEAD> 
上 上 述 的 样式 表 告 诉 浏览 右 用 加 大 号 的 红色 字体 显示 一 级 标题 ; 用 大 号 的 监 色 字体 显示 


二 级 标题 。 

如 条 要 将 多 个 选择 堪 声 明 为 相同 的 样式 ， 为 了 减少 样式 表 的 重复 声明 ， 可 以 使 用 组 合 
的 选择 占 声 明 。 例 如 ， 将 文档 中 所 有 标题 的 磊 色 设置 为 红色 ， 子 体 为 sans-serif， 可 以 通过 
以 下 组 合 给 出 声明 : 

Hi1, H2, H3, H4, HS, H6 { color: red; font-family: sans-serif } 

此 外 声明 样式 时 ， 还 可 以 用 空格 阳 开 两 个 或 更 多 的 蛙 一 选择 右 ， 这 种 选择 器 称 为 天 联 
选择 占 。 由 于 层 著 顺序 的 规则， 它们 的 优先 权 比 单一 的 选择 器 大 ， 例 如 : 

p em { background: red } 

这 个 例子 中 关联 选择 器 是 pem。 这 个 值 表示 段落 中 的 强调 文本 会 是 红色 背景 ;而 标题 
的 强调 文本 则 不 受 影响 。 

下 面 分 别 介绍 样式 表 的 各 个 组 成 部 分 。 

1. 选择 器 ”任何 html 元 素 都 可 以 是 一 个 CSS 的 选择 器 ， 选 择 器 仅仅 是 指向 特别 样式 的 
元 素 。 根 据 声明 的 不 同 ， 可 把 选择 器 分 为 四 类 ， 分 别 介绍 如 下 : 

(1) 类 : 创建 可 作为 “ 闫 ” 属 性 应 用 于 文本 范围 或 文本 块 的 目 定 义 样 式 。 它 由 用 户 
给 定 样 式 表 元 条 名 称 ， 并 且 可 以 在 整个 HTML 中 被 调用 。 

“类 ”可 以 看 作 是 为 样式 规则 命名 的 选择 紫 。 一 个 html 元 聚 的 选择 右 可 以 有 不 同 的 
“类 ”， 因 而 允许 同一 元 素 有 不 同 的 样式 。 在 CSS 中 ， 用 一 个 点 开头 表示 类 别 选择 器 定义 ， 
例如 : 

.14px {color : #f60 ;font-size: 14px ;} 

这 个 方法 比较 简单 灵活 ， 可 以 随时 根据 页 面 需要 新 建 和 删除 。 例 如 在 不 同 的 段落 使 用 
不 同 颜色 的 文本 : 

p.red { color: red } 


p.green { color: green } 
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以 上 的 例子 建立 了 red 和 green 两 个 类 ， 供 不 同 的 段 洲 使 用 。 如 采 要 将 样式 应 用 于 指定 

的 网 页 元 素 ， 用 class=" 类 别名 "的 方法 指明 元 妹 使 用 的 样式 类 ， 例 如 : 
<p class=red> 第 一 段 文 本 </p> 
则 段 内 文本 使 用 p.red 类 样式 。 每 个 选择 器 在 某 一 时 刻 只 允许 使 用 一 个 类 。 
声明 类 时 ， 也 可 以 不 指定 具体 元 素 ， 例 如 : 
.cnO1 { font-size: small } 

在 这 个 例子 ， 名 为 cn01 的 类 可 以 被 用 于 任何 元 素 。 

(2) 标签 : 用 于 重新 定义 一 个 特定 HTML 标签 的 默认 格式 。 单 击 “CSS” 面 板 中 “ 标 
签 ” 下 拉 列 表 框 ， 可 以 看 到 所 有 的 HTML 标识 符 ， 从 中 选择 一 个 标识 符 ， 或 直接 输入 一 种 
HTML 标识 待 ， 如 <BODY>，<H1> 等 ， 重 痢 进 行 定义 。 样 式 一 经 定义 了 驶 在 整个 HTML 文 
件 中 通用 。 

例如 ， 链 接 文 本 默认 情况 下 均 显 示 为 监 色 ， 且 有 下 划 线 。 以 下 代码 重新 定义 了 <a> 
标签 ， 设 置 链 接 文 本 的 字体 族 为 Yerdana, Arial, Helvetica, sans-serif， 大 小 为 12; 颜色 为 红 
色 。 


al 
font-family: Verdana, Arial, Helvetica, sans-serit; 
font-size: 12px; 
font-style: normal; 
color: #FFOOOO:; 
} 


(3) 复合 内 容 : 用 于 定义 组 合 样式 《两 个 或 两 个 以 上 CSS 元 素 组 合 ) 以 及 具有 特殊 
序列 写 〈ID) 的 样式 元 素 。 选 择 堪 提 供 了 四 种 给 定 的 组 合 样式 ， 分 别 是 aactive〈 激 活 的 
链接 ) ; aphover (当前 链接 ) : alink【〈 链 接 ) ; avisited〈 访 问 过 的 链接 ) 。 通 过 对 这 
4 个 元 素 有 的 定义 可 以 在 网 页 中 非常 方便 地 制作 有 个 性 的 超级 链接 。 

例如 ， 以 下 代码 设置 链接 文本 的 字体 为 隶书 ; 字体 大 小 为 14px; 颜色 为 绿色 。 

a:link { 

font-family: "隶书 "; 
font-size: 14px; 
color: #006600; 


} 

(4) ID: 选择 右 用 于 个 别 地 定义 每 个 元 素 的 成 分 。 这 种 选择 占 应 该 尽量 少 用 ， 因 为 
它 具 有 一 定 的 局 限 。 指 定 ID 选择 大 时， 其 名 字 前 和 面 要 有 指示 符 “#”， 例 如 : 

#myid{ text-indent: 3em } 

使 用 ID 选择 右 的 方式 如 下 : 

<p id=myid> 文 本 缩 进 3em</p> 

2. 属性 、 值 和 注释 ”为 选择 右 指 定 属性 是 为 了 其 体 设 管 选择 右 人 条 方 务 外 观 。 属 性 包 
括 颜 色 、 边 界 和 字体 等 。 属 性 值 是 一 个 属性 接受 的 指定 。 下 面 看 重 说 一 下 颜色 值 和 衬 体 的 
属性 值 。 

闫 色 值 可 以 用 RGB 值 号， 例如 : color : rgeb(255,0,0); 也 可 以 用 十 六 进 制 写 ， 例 如 
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color:#FF0000。 如 来 十 六 进 制 值 是 成 对 草 复 的 可 以 简写， 效果 一 样 。 例 如 :#EF0000 可 以 写 
成 #00。 但 如 来 不 重复 就 不 可 以 便 写 ;例如 #EC1A1B 必 须 写 满 入 位 。 

天 于 字体 ，Web 标 准 推荐 如 下 字体 定义 方法 : 

body { font-family : "Lucida Grande"， Verdana， Lucida， Arial， Helvetica， 宋 


体 ,sans-serif; } 

学 体 按照 所 列 出 的 顺序 选用 。 

在 上 例 中 ， 如 果 用 户 的 计算 机 包含 有 Lucida _ Grande 字体， 文档 将 被 指定 为 Lucida 
Grande。 如 来 没有 ， 则 人 被 指定 为 Verdana 字 体 ， 如 果 也 没有 Verdana， 束 指定 为 Lucida 子 体 ， 
依 此 类 推 ， 其 中 ，Lucida Grande 字 体 适 合 Mac OS X;， Verdana 字 体 适 合 所 有 的 Windows 系 
统 ; Lucida 适 合 UNIX 用 户 ; 宋体 适合 中 文 简体 用 户 ， 如 果 所 列 出 的 字体 都 不 能 用 ， 则 调用 
系统 字体 sans-serif。 

样式 表 里 面 的 注释 使 用 与 C 语 言 编 程 中 一 样 的 约定 方法 ， 即 使 用 译 ...*/ 指 定 。 例 如 以 下 
代码 就 是 CSS1 注 释 的 一 个 例子 : 

/* COMMENTS CANNOT BE NESTED */ 

3. 伪 类 和 伪 元 素 ”是 特殊 的 类 和 元 系 ， 能 目 动 地 被 文 持 CSS 的 浏览 需 所 识别 。 伪 类 区 
别 于 不 同 种 类 的 元 素 ， 例 如 visited links 〈 已 访问 的 连接 ) 和 active links〈 可 激活 连接 ) 描 
述 了 两 个 定位 销 〈anchors) 的 类 型 。 伪 元 素 指 元 素 的 一 部 分 ， 例 如 段 洛 的 第 一 个 字母 。 伪 
关 或 伪 元 素 规 则 的 定义 形式 与 选择 器 相似 ， 如 下 所 示 : 

伪 关 { 属性 : 值 } 
伪 元 素 { 属性 : 值 } 

伪 类 和 伪 元 素 不 是 用 html 的 class 属 性 指定 。 一 般 的 类 可 以 与 伪 类 和 伪 元 素 一 起 使 用 ， 

例如 下 面 的 形式 : 
选择 器 . 关 : 伪 类 { 属性 : 值 】} 
选择 器 . 关 : 伪 元 系 { 属性 : 值 】 

第 用 的 伪 类 和 伪 元 素 如 下 : 

(1) 定位 销 伪 关 。 伪 其 可 以 指定 a 元 素 以 不 同 的 方式 显示 链接 、 已 访问 链接 和 可 油 
活 链 接 。CSS 中 用 四 个 伪 类 来 定义 链接 的 样式 ,分 别 是 :a:link、a:visited、a:hover 和 a : active， 
例如 : 


a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;} 
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;} 
a:hover {font-weight : bold ;text-decoration : underline ;color : #{60 ;} 


a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;} 


以 上 语句 分 别 定义 了 链接 、 已 访问 过 的 链接 、 交 标 停 在 上 方 时 、 按 下 蔷 标 时 的 样式 。 


注意 : 
一 在 CSS 中 定义 链接 样式 时 ,必须 按 以 上 顺序 书写 , 否则 显示 效果 可 能 会 和 


预想 的 不 一 样 。 
(2) 首 行 伪 元 了 系 。 通 向 报 纸 上 的 文章 衣 行 都 会 以 全 部 大 写 的 粗 体 展示 。 使 用 CSS1 
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的 前 行 伪 元 素 可 以 轻松 实现 这 个 功能 。 上 自行 伪 元 又 加 以 用 于 任何 块 级 元 素 ， 例如 P、HI 
等 等 。 以 下 是 一 个 首 行 伪 元 素 的 例子 : 
P:frst-line{fftont-varlant: small-caps;font-weight: bold} 
(3) 首 个 字母 伪 元 素 。 首 个 字母 伪 元 素 用 于 加 大 显示 每 个 单词 的 首 字 母 。 一 个 诈 个 
字母 伪 元 素 可 以 用 于 任何 块 级 元 系 ， 例 如 : 
P:first-letter{font-size: 300%; float: left} 
则 段落 中 首 字 母 会 比 普通 字体 加 大 三 倍 。 


6.4.2 ”创建 (SS 样式 


寻 半 样式 表 是 W3C 用 来 加 强 HTML 标 签 在 显示 网 页 文件 上 的 不 足 之 处 而 规划 的 ， 所 以 
在 用 法 上 基本 与 HTML 并 无 两 样 ， 只 是 加 强 了 原来 HTML 中 样式 的 功能 。 下 面 通过 一 个 简 
单 实例 介绍 创建 CSS 样 式 的 方法 步骤 。 

01 将 插入 点 放 在 文档 中 。 在 CSS 样 式 面 板 中 ， 单 击 面 板 右 下 角 区 域 中 的 “新 建 CSS 
样式 ”按钮 基 。 

02 在 弹出 的 图 6-30 所 示 的 “ 狐 建 CSS 规 则 ”对 话 框 中 选择 CSS 样 式 表 的 类 型 。 本 例 
选择 “标签 ”。 


新 建 C55 规则 
选择 器 类 型 : 
汶 Css 规则 选择 上 下 次 选择 器 类 型 。 
类 ( 可 应 用 于 任何 HTWL 元 素 ) 


选择 器 名 称 : 
选择 或 输入 选择 器 名 称 。 


规则 定义 : 
选择 定 必 规则 的 位 置 。 


区 避 限 该 立 档 ) 


图 6-30 “新 建 CSS 规 则 ”对 话 框 


在 Dreamweaver CS6 中 可 以 定义 以 下 四 种 类 型 的 CSS 样 式 : 

(1) 类 : 创建 可 作为 类 属性 应 用 于 文本 范围 或 文本 块 的 目 定 义 样式 ， 可 应 用 于 任何 
HTML 元 素 。 选 择 该 项 后 输入 选择 砸 名称。 类 名 称 必 须 以 英文 字母 或 句点 〈.) 开关 ， 不 可 
包含 空格 或 其 他 标点 符号 。 

(2) 标签 : 重 定 义 特定 HTML 标签 的 默认 格式 。 选 择 该 项 后 要 在 “选择 器 名 称 ” 区 域 
输入 一 个 HTML 标 签 ， 或 从 下 拉 列 表 中 选择 一 个 HTML 标 签 。 

(3) 复合 内 容 : 为 具体 某 个 标签 组 合 或 所 有 包含 特定 Id 属性 的 标签 定义 格式 。 选 择 议 
项 后 ， 需 要 在 “选择 器 ” 域 中 输入 一 个 或 多 个 HTML 标 签 ， 或 从 弹出 式 亲 单 中 选择 一 个 标 
签 。 弹 出 菜单 中 提供 的 选择 器 包括 aactive、a:hover、a:link 和 a:visited。 
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(4) ID: 仅 用 于 一 个 HIML 元素 ， 余 列 地 定义 该 元 素 的 威 分 。ID 名 称 必 须 以 瑞 文 字 
母 开 头 ， 可 在 名 称 前 添加 “#”， 不 应 包含 空格 或 其 他 标点 符号 。 

03 在 “选择 回 名 称 ” 下 方 的 下 拉 列 表 中 选择 “hl1”。 

04 在 “规则 定义 ”下 方 的 下 拉 列 表 中 选择 定义 样式 的 位 置 。 本 例 选 择 “ 仪 限 该 文 
档 ”。 大 要 创建 外 部 样式 表 ， 请 选择 “新 建 样式 表 文 件 ”; 大 要 在 当前 文档 中 租 入 样式 ， 
请 选择 “ 仅 限 该 文档 ” 

05 骨 单 击 “ 确 定 ” 按 人 出 现 图 6-31 所 示 的 “CSS 规 则 定义 ”对 话 框 。 

06 在 对 话 框 中 设置 新 CSS 样 式 选项 ， 类 型 定义 如 图 6-31 所 示 : 字体 为 “方正 彩云 简 
体 ”， 大 小 为 60 像 又 ， 闫 色 为 #09C。 然 后 在 分 类 栏 选 择 “ 区 块 ”， 在 打开 的 页 和 耐 设置 文本 
对 齐 方式 为 “居中 ”。 设 置 完 毕 后 单 击 “确定 ”按钮 。 


hl 的 C55 规则 定义 


Font-family (F): 


Font-size [Ss): Font-weight (W): 


Font-style lT): Font-variant OM): 


Line-heieht (IT): px Text-transform (R): 


Text-decoration(D): [ ]underline (WU) Color (C) : 属 axsc | 


[Doverline (0) 
器]1line-through (L) 
Dblink (8) 
Dnone (NW) 


ET 确定] [ 取消”] [应 用 ] 


图 6-31 “CSS 规 则 定义 ”对 话 框 


全 此 ， CSS 样式 创建 完毕 ， 应 用 该 样式 前 后 页 面 的 效果 如 图 6-32 所 示 。 


Fr 
秒 c viawtsubVvemmosttestVcMoi\ 格 玖 D 本 htal (ENT Ie -Ox 


A 


稚 忆 Wraatsabwessaattaatvehi64 隐 班 已 床 -hialL TTI 


Rd ， + | i 
人 lni| 
reg cs ~ | ps 和 EE PL 下 PE ssa- 
gy pr 3 pe F EY 
TR a A 可 由 = 占 下 全 汪 由 这 本 | FT 
hE bs he rr re 
必 者 : 补 清 吉 oa 


POOOOOT OO 


booed 


老家 前 面 的 相 给 人 家 促 外 邦 心 本 的 树 贡 ， 树苗 可 下 来 后 ， 3 二 入 各 是 网 几 作者 ， 韩 请 可 
天 和 月 计 五 天 ， 有 时 二 十 几 天 来 一 次 。 流 水 的 a 
EL rg 有 讨 访 蓉 世 地 枯 要 了 ， 所 以 ， 他 米 的 时 | 
我 起 先 认 为 亿 太 ， 隔 那 去 久 才 为 树 流 水 。 介 是， 二 的 人 香雪 会 知道 有 几 桂 树 拓 莫 了 呢 ? 多 下 老家 前 面 的 空地 ， 和 虱 销 上 家 种 棒 花 放下 抱团 菌 。 树苗 种 下 率 后 
者 天 加 全 是 自生 染 洲 ， 人 只 倍 术 旧 后 各 全 丰 直 过 时 扩 交 雷 1， 各 洲 尖 只 本 扩 相 当天 人 ee 有 bi i ph of 
a Ee yb 

9 人 请 重心 长 地 说 : “加 理 bn 汗 让 为 挫 才 为 出 灌水。 但 是 ， 情 的 人 怎么 全 知道 有 1 jk 了 呢 
安 泽 生 在 地 弄 上 ， 无 法 深入 地 底 。 一 全 我 停止 涪 水 ， 树 苗 会 村 要 得 旬 才 。 溯 而 可 以 存 舌 的 
Bs 皇 扩 各， 也 是 一 吹 种 加 了 | 2 四 是 基 和 .所 愉 桂 二 请 局 生 洒 于 于 地 重 扫 上 本 ， 我 膏 时 下 全 草本 人 本 
人 7 全 17 Rhoxn -站 证 醒 m。 se 4 下 /1 区 重信 中 六 Ga i rt i + 基体 下 次 


图 6-32 ”应 用 新 规则 前 后 的 效果 


在 Dreamweaver CS6 中 还 可 以 将 多 个 CSS 类 应 用 于 单个 元 素 。 选择 一 个 元 素 , 执行 以 
下 操作 之 一 打开 “多 类 选区 ”对 话 框 ， 然 后 选择 所 需 类 。 可 以 从 多 个 访问 点 打开 “多 类 选 
区 ”对 话 框 : 

@ 在 HIML 属性 面板 的 “类 ”下 拉 列 表 中 选择 “应 用 多 个 类 ”。 

@ 在 CSS 属性 检查 器 的 “目标 规则 ”弹出 菜单 中 选择 “应 用 多 个 类 ”。 
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@ 在 “文档 ”窗口 的 撒 部 的 标记 选择 需 于 单 雷 鼠 标 右键 ， 在 弹出 的 快捷 染 单 中 选择 
“设置 类 ”/“ 应 用 多 个 类 ”。 
应 用 多 个 类 之 后 ，Dreamweaver 会 根据 选择 创建 新 的 多 类 。 


6. 4.3 链接 外 部 CSS 表 


所 谓 外 部 CSS 样 式 表 ， 指 的 是 一 个 包含 样式 和 格式 规范 的 外 部 文本 文件 。 对 一 个 外 部 
CSS 样式 表 进 行 编辑 后 ,所 有 同 该 CSS 样式 表 链 接 的 文档 都 会 根据 所 作 的 修改 目 动 进行 
更 新 。 

下面 演示 链接 /导入 一 个 外 部 样式 表 的 操作 步 又 。 

019 继续 上 例 。 先 创建 一 个 CSS 样 式 表 。 在 “新 建 CSS 规 则 ”对 话 框 中 选择 CSS 样 式 
的 类 型 为 “复合 内 容 ”， 并 在 “选择 器 名 称 ” 下 拉 列 表 中 选择 “a:link”。 定 义 样式 的 位 置 
选择 “新 建 样式 表 ”。 

02 9 单 击 “ 确 定 ” 后 ， 在 弹出 的 对 话 框 中 将 样式 保存 为 newcss.css。 单 击 “ 确 定 ”， 
在 打开 的 “a:link 的 CSS 规 则 定义 ”对 话 框 中 设置 文本 的 颜色 为 深 绿色 ， 无 修饰 。 

03 1 同 理 , 再 创建 一 个 样式 表 , 选择 堪 为 ahover, 定义 样式 的 位 置 选择 “newcss.css”， 
字号 为 20， 颜 色 为 红色 。 

04 上 在 “CSS 样 式 ” 面 板 中 ， 单 击 “ 附 加 样式 表 ” 按 钮 鳞 ， 弹 出 图 6-33 所 示 的 “ 链 
接 外 部 样式 表 ” 对 话 框 。 


链 控 外 部 样式 表 


文件 ARLG): | 


添加 为 : @) 链接 LL) 
O 〇 导入 OL) 


媒体 而 ) : 
您 也 可 以 输入 逗号 耸 阳 的 媒体 类 型 列表 。 


Dreamweaver 的 范 全 样式 表 可 以 帮助 您 起 步 。 


图 6-33 “链接 外 部 样式 表 ” 对 话 框 


05 9 单 击 对 话 框 中 的 “浏览 ”按钮 ， 选 择 已 创建 的 newcss.css 文 件 。 
06 选择 样式 表 的 汪 加 方式 。 本 例 选 择 “ 链 接 ”。 
如 果 选 择 “ 导 入 ”， 会 将 外 部 CSS 样 式 表 的 信息 包含 进 当前 文档 ， 而 “链接 ”选项 只 
该 取 和 传送 信息 ， 不 会 载 入 样式 信息 。 虽 然 “ 导 入 ”和 “链接 ”都 可 以 将 外 部 CSS 样 式 表 
中 的 所 有 样式 调用 到 当前 文档 中 , 但 “链接 ”可 以 提供 更 多 的 功能 ， 适用 的 浏览 器 也 更 多 。 
07 在 “媒体 ”下 拉 列 表 中 指定 样式 表 的 目标 媒介 ， 本 例 不 作 选 择 。 
08 单 击 “ 确 定 ” 投 钮 ， 将 所 需 的 样式 应 用 于 当前 页 面 。 
09 选中 文档 中 的 “ 林 清 辫 ”, 在 属性 面板 的 “链接 ”文本 框 中 键入 相应 的 链接 URL。 
10 保存 文档 。 按 F12 键 在 浏览 右 中 预 钨 页 面 。 
人 至此， 外 部 样式 表 newcss.css 已 经 分 配给 当前 的 文档 ， 效 果 如 图 6-34 上 所 示 。 
在 浏览 器 中 预览 该 页 面 时 , 链接 文本 显示 为 深 绿 色 ; 当 将 鼠标 指针 移 到 链接 文本 上 时 ， 
链接 文本 显示 为 红色 ， 且 字体 大 小 为 20 号 。 
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无 标题 文档 一 Windows Internet Explorer 下 | 区 | 全 无 标题 文档 一 Windows Internet Explorer [ [elx) 


py 


SA 过 E| C:\Inetpub\wwwroot W eal. 乌 Ml Cy A 加 C:\Inetpub\wwwroot v| 4 人 | X 个 Dr: 
袖 收藏 夹 | 鹤 如 ”起 | 免费 Hotmail 大 | > 次 收 京 克 | 老司 ~ 央 免费 lotnail 居 | 

| » 
感 无 和 题 文档 全 必 起 标题 文档 


钱 花 心 本 ”| ”六 花 名 不 


作者 ， 林 清 辫 作者 : 休 浓 弃 


乡下 老家 前 面 的 空地 ， 租 给 人 家 种 桃花 心 木 的 树苗 。 树 苗 家 前 面 的 空地 ， 租 给 人 家 种 桃花 心 森 的 树苗 。 树苗 
种 下 来 后 ， 植 树 人 人 忆 是 陋 几 天 才 来 浇 水 。 他 来 的 天 数 并 没有 规 种 下 来 后 ， 秆 树 人 总 是 震 几 天 才 宋 深水。 他 襟 的 天 数 并 没有 规 
从 逢 二 对 向 得 企 ， 志 从 天 二 寿 寺 下 查 吕 让 扫 br a SAA 


时 我 的 电脑 9 ~| 生 100% > :www. 123. 站 我 的 电脑 组 | 罗 100% > 


图 6-34 ”链接 外 部 样 坏 表 前 后 的 效 打 


6. 4.4 ”编辑 CSS 样 式 


Dreamweaver CS6 提 供 了 多 种 方式 对 样式 表 进 行 管理 。 如 果 要 编辑 某 个 样式 表 ， 请 执 
行 以 下 操作 之 一 : 

@ 单 击 文 本 属性 面板 左上 角 的 鳃 嗓 按钮 ， 在 “目标 规则 ”下 拉 列 表 中 选择 要 编辑 
的 CSS 样式， 然后 单 击 上 篇 吐 则 _ 按钮， 

@ 执行 “窗口 ”/“CSS 样式 ”命令 打开 “CSS 样式 ”面板 ， 在 样式 列表 中 双击 要 修 
改 的 样式 ; 

@ 在 “CSS 样式 ”面板 中 选中 要 修改 的 样式 ， 然 后 单 击 “CSS 样式 ”面板 确 部 的 “ 编 
辑 样式 ”按钮 十， 打开 “CSS 规则 定义 ”对 话 框 ; 

@ 执行 “窗口 ”/“CSS 样式 ”命令 打开 “CSS 样式 ”面板 ， 单 击 面板 下 方 的 属性 值 ， 
当 属 性 值 区 域 变 为 可 编辑 状态 时 ， 下 接 对 选中 的 属性 进行 修改 ， 如 网 6-35 所 示 。 


所 选 内 容 的 荐 要 
backgrourd-imape wll /bloglimaees. .. 


向，。， 五 和 中 昌 季 小 
#00 


| 单 击 这 一 列 ， 可 以 | 
”| 直接 修改 尾 性 值 


图 6-35 ”直接 修改 属性 值 


“CSS 规 则 定义 ”对 话 框 的 分 类 列表 中 共有 如 下 9 个 选项 , 选择 其 中 一 个 选项 时 ， 和 面板 
右边 会 显示 当前 选项 对 应 的 参数 。 
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“类型 “是 默认 的 选项 ， 主 要 用 于 定义 葡 本 的 相关 属性 一 如 了 字体、 大 小 、 需 色 等 。 
“ 背 景 ” 用 于 设置 衣 景 颜色 稍 景 铬 像 的 大 小 、 位 置 及 排列 方式 。 

“区 块 ”用 于 调整 子 之 间 、 子 母 之 间 的 间距 及 对 齐 方式 。 

“ 方 框 ” 用 于 设置 网 页 元 素 在 页 面 中 的 大 小 和 位 置 。 

“边框 ”用 于 设置 边框 的 样式 。 

“列表 ”用 于 设 早 项目 符 写 和 项 目 编写 的 外 观 及 位 置 。 

“定位 ”用 于 设置 样式 在 网 页 中 的 有 其 体位 置 。 

“扩展 ”用 于 制作 一 些 特殊 效 来 或 进行 一 些 特殊 操作 ， 如 打印 时 目 动 换 页 、 改 变 
眼 标 的 形状 、 对 文本 和 图 像 应 用 滤 镜 ， 等 等 。 

@ “过渡” 用 于 创建 CSS 过 渡 效 果 ， 将 平 消 属性 变化 应 用 于 页 和 面 元 素 ， 以 啊 应 触发 
胡 事 件 。 


6. 4.5 实例 制作 之 创建 样式 表 


默认 状态 下 ， 超 级 链接 的 文本 显示 为 赣 色 ， 并 标记 有 下 划 线 。 为 页 面 美观 ， 使 文本 与 
页 面 其 他 元 素 融 合 ， 个 人 网 站 为 页 面 定义 了 样式 表 ， 步 又 如 下 : 
01 打开 将 作为 主页 的 index.html。 上 有 目前 还 只 制作 了 导航 条 。 
02 选择“ 窗口”/“CSS 样 式 ” 及 单 命令 ， 打 开 “CSS 样 式 ” 面 板 。 单 击 该 面板 右 
下 角 的 “新 建 CSS 规 则 ”按钮 饥 ， 弹 出 “新 建 CSS 规 则 ”对 话 框 。 
03 在 对 话 框 中 ， 选 择 CSS 样 式 的 类 型 为 “复合 内 容 ”， 并 在 “选择 器 名 称 ” 下 拉 列 
表 中 选择 “a:link”， 定 义 样式 的 位 置 选择 “新 建 样 式 表 ”。 
04 单 击 “ 确 定 ” 后 ， 在 弹出 的 对 话 框 中 将 样式 保存 为 newcss.css。 单 击 “ 确 定 ”， 
在 打开 的 “a:link 的 CSS 规 则 定义 ”对 话 框 中 设置 文本 的 颜色 为 绿色 ， 无 修饰 。 
05 同 理 ， 再 创建 一 个 样式 表 , 选择 需 为 ahover, 定义 样式 的 位 置 选择 “newcss.css”， 
学 号 为 18， 颜 色 为 桔 红 色 。 
06 保存 文档 。 按 Fl12 快 捷 键 在 浏览 器 中 预览 页 面 。 
以 上 两 个 CSS 样 式 定 义 了 页 面 中 的 链接 文本 的 活动 状态 和 鼠标 指针 经 过 时 的 状态 。 


6.5 ”CSS 样式 的 应 用 


HTML 文 档 中 的 CSS 样 式 不 仅 可 以 控制 大 多 数 传统 的 文本 格式 属性 ， 例 如 字体 、 字 号 
和 对 章 方式 等 ， 还 可 以 定义 一 些 特殊 的 HTML 属 性 ， 例 如 定位 、 特 别 效果 和 鼠标 轮 蔡 等 。 
F 面 通过 两 个 简单 的 实例 演示 CSS 样 式 的 强大 功能 。 


6.5.1 变化 的 鼠标 


在 网 页 中 ， 跨 标 指针 可 以 根据 需要 而 发 生 形状 上 的 各 种 变化 。 例 如 ， 移 动 到 链接 文字 
上 上 时， 会 显示 为 手 形 ; 移 到 正文 上 时 ， 显 示 为 指针 。 下 面 通过 一 个 便 单 实例 演示 如 何 通 过 
CSS 来 改变 限 标 指针 的 样式 ， 使 鼠标 指针 移 到 不 同 的 元 素 上 时 ， 显 示 不 同 的 形状 。 
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0 新 建 一 个 HTML 文 档 。 执 行 所 修改 ”/“ 页 面 属性 ”命令 ， 弹 出 页 面 属 性 对 话 框 。 

02 单 击 “ 浏 览 ” 按 钮 选择 背景 图 像 。 由 于 背景 图 像 没 有 填 满 整个 窗口 , Dreamweaver 
会 日 动 平 铺 (和 草 复 ) 背景 图 像 ， 如 图 6-36 所 示 。 

下 和 耐 使 用 CSS 样 式 表 禁 用 图 像 平 铺 。 

03 9 执行 “窗口 ”/“CSS 样 式 ” 命 令 ， 打 开 “CSS 样 式 ” 浮 动 面板 。 

04 9 单 击 “CSS 样 式 ” 面 板 上 的 “新 建 CSS 规 则 ”按钮 ， 在 弹出 的 “新 建 CSS 规 则 ” 
对 话 框 的 “选择 右 类 型 ”下 拉 列 表 中 选择 “类 (可 应 用 于 任何 HTML 元 素 ) ”， 在 “选择 
器 名 称 ” 文 本 框 中 键入 “.background”， 在 “规则 定义 ”下 拉 列 表 中 选择 “ 仪 限 该 文档 ”， 
然后 单 击 “确定 ”按钮 关闭 对 话 框 。 

05 几 在 “CSS 样 式 定 义 ” 对 话 框 的 “分 类 ”列表 框 中 ， 选 择 “ 和 背景 ”选项 。 单 击 “ 浏 
响 ” 按 钮 ， 选 择 网 像 文 件 。 单 击 “ 重 复 ” 下 拉 列 表 框 下 拉 般 头 ， 选 择 “ 不 重复 ”。 然 后 单 
击 “ 人 确定 ”按钮 。 

06 在 文档 窗口 的 状态 栏 中 右 击 sbody> 标 签 ， 并 从 弹出 的 快捷 亲 单 中 选择 “设置 类 ” 
子 来 单 中 的 .background。 应 用 样式 后 的 效果 如 图 6-37 上 所 示 。 


< < 3 


Ee 


‘ag Hg . 


图 6-36 ”图 像 平 铺 效果 图 6-37 茶 用 图 像 平 铺 效 末 


07 在 文档 窗口 中 输入 如 下 内 容 : “鼠标 效果 ”， J 
为 一 级 标题 。 然 后 在 文档 窗口 中 输入 如 下 内 容 : “请 把 鼠标 移 到 相应 的 位 置 租 看 效 末 。 
08 明 选择 “插入 ”/“ 布 局 对 象 ”/ “AP Div” 命 令 , 或 蛙 击 “布局 ”插入 面板 上 的 “ 绘 
制 AP Div” 的 图 标 ， 在 文档 窗口 插入 4 个 AP 元 素 ， 在 对 应 的 属性 设置 面板 中 设置 它们 的 
“CSS-P 元 素 名 称 ” 分 别 为 apDiv1、apDiv2、apDiv3 及 apDiv4。 
09 肌 在 4 个 AP 元 系 中 分 别 输入 “文本 ”、“ 等 符 ”、“ 指 针 ” 及 “求助 ”。 然 后 新 
建 CSS 规 则 ， 使 文本 居中 显示 。 和 输入 文本 内 容 后 的 文档 显示 如 图 6-38 所 示 。 


眼 标 效 来 


证 将 吉 标 时 和 姑 由 应 的 芷 置 音 省 效果 ， 


和 所 


扯 


康 助 


图 6-38 ”文档 稳 口 显示 效果 


10 目 打开 “CSS 样 式 ” 面 板 。 单 击 该 面板 右上 角 的 选项 菜单 按钮 | 到， 从 打开 的 下 拉 
荣 单 中 选择 “新 建 CSS 样 式 ” 命 令 ， 弹 出 “新 建 CSS 样 式 ” 面 板 。 

11 贞 在 该 面板 中 选择 “ID” 选 项 ， 然 后 在 “名 称 ” 文 本 框 中 输 六 #apDiv1， 最 后 选中 
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面板 夺 部 的 “ 仪 限 该 文档 ”选项 。 

12 朋 设置 完成 后 单 击 按钮 “确定 ”进行 确认 ,并 打开 “CSS 规 则 定义 ”对 话 框 。 单 
击 对 话 框 左 侧 “ 分 关 ” 列 表 框 中 的 “扩展 ”选项 ， 切 换 到 扩展 设置 面板 中 。 

13 肌 打开 “光标 ”选项 后 面 的 下 拉 列 表 框 ， 选 择 Text， 表 示 当 鼠标 移动 到 该 文本 上 
时 变 为 选择 文本 的 形状 I。 

14 贞 通过 同样 的 方法 为 其 他 3 个 AP 元 素 设置 对 应 的 鼠标 指针 形状 。 

15 贞 设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 进 行 硝 认 并 关闭 该 面板 ， 返 回 到 文档 窗口 。 打 
开 文件 沫 单 ， 选 择 保 存 命令 ， 将 该 文档 保存 。 投 F12 键 进行 预览 网 页 ， 当 把 鼠标 指针 移动 
到 文字 “ 手 形 ”上 时 ， 鼠 标 指针 将 变 成 手 的 形状 ; 当 把 鼠标 移动 到 其 他 文本 上 时 ， 鼠 标 指 
针 将 变 为 对 应 形状 。 

需要 注意 的 是 ， 有 些 CSS 样 式 只 有 在 预览 时 才能 看 到 显示 效果 ， 例 如 本 例 中 的 CSS 样 

Te 


6. 5.2 背景 不 跟随 内 容 滚动 


很 多 网 页 设计 者 都 习惯 在 网 页 中 添加 背景 网 族 ， 以 美化 页 面 。 当 网 页 内 容 超 出 一 屏 时 ， 

拖 动 深 动 条 时 ， 背 景 图片 会 与 页 面 内 容 相对 静止 地 一 起 深 动 ， 那 么 能 耕 锁 定 背 景 不 跟随 内 
容 深 动 呢 ， 管 案 是 肯定 的 。 下 向 就 演示 固定 网 页 背景 的 操作 步 又 。 

01 9 狐 建 一 个 页 面 ， 然 后 单 击 “修改 ”/“ 页 面 属性 ”命令 ， 为 页 面 设置 背景 图 像 。 

02 在 页 面 中 输入 需要 的 文本 内 容 。 然 后 打开 “CSS” 和 面板 ， 单 击 面 板 右 下 角 的 “新 
建 CSS 规 则 ”图 标 ， 进 入 “新 建 CSS 规 则 ”对 话 框 。 

03 在 “选择 器 类 型 ”下 拉 列 表 选 择 “ 标 签 ”， 在 “选择 器 名 称 ” 下 拉 列 表 中 选择 
“body”。 单 击 “ 人 确定” 按钮 打开 “body 的 CSS 规 则 定义 ”对 话 框 。 

04 在 左 侧 的 “分 类 ”列表 中 选择 “背景 ”然后 在 右 侧 的 参数 耐 板 中 设置 “Background- 
attachment” 为 “fixed”， 如 图 6-39 所 示 。 


body 的 C55 规则 定 交 


Backeround-color (C): 厨 | | | 
Backer ound-image (IT): |file: ///C |/Inetpub/ www: v | 
Backer ound-repeat [及 ] : |no-repeal v 


Backeround-attachment (T): fixed v | 


Backeround-position (WX): | 


Backeround-position (Y): | 
在 这 里 设置 附 
1 


mm 


图 6-39 ”设置 “附件 ”参数 
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.05 明 保存 文档 。 按 F12 键 在 浏览 囊 哩 预 响 页 面 效 来 如 图 6s40 捷 示 。 


曙 C:AInetpubAuwwmwzoottestcho6AE. 5. 2 示 屁 不 跟随 内 春 流动 . html (HTXL) 


滚动 条 在 这 里 


- 昌 | | 
国 国 
<body> <p> lo vv: 回 加 [528 x 381v 119 K / 3 秒 Unicode ( :| <bodr> p> io0% v| 回 加 [| 528 x 381 |119K/3 秒 | Unicode Ql ..: 


图 6-40 ”背景 固定 的 页 面 效果 
拖 动 浏览 右 究 口 右 侧 的 深 动 条 ， 页 面 内 容 深 动 ， 但 页 面 背 景 始终 保持 不 动 。 
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7.1 创建 表格 


ee 利用 表格 可 以 方便 地 将 数据 、 文 本 、 图 片 规范 显示 在 页 耐 上 ， 使 
网 页 更 加 美观 、 有 条 理 。 在 HIML 中 ， 表 格 是 很 多 优秀 站 点 设计 的 整体 标准 ， 用 表格 格式 
化 的 页 面 在 不 同 平 台 es ni 保持 布局 和 对 章 
不 过 ， 表 格 有 一 个 小 小 的 缺陷 : 它 会 使 网 员 显 示 的 速度 变 慢 。 因为 在 浏览 器 中 ， 一 般 
OR ee 而 
使 用 表格 就 不 同 了 ， 表 格 一 定 要 等 到 整个 表格 的 内 容 全 部 下 载 完 成 之 后 ， 才 能 在 客户 端的 
浏览 器 上 显示 出 来 。 因 此 ， 在 多 重 舱 套 的 表格 布局 中 ， 页 面 打 开 速 度 会 比较 慢 ，。 
尽管 如 此 ， 表 格 在 网 页 布局 中 仍 扮演 着 很 重要 的 角色 ， 是 网 页 设计 者 必须 掌握 的 一 个 
强大 的 工具 。 下 和 面 我 们 就 介绍 表格 一 些 常用 的 操作 。 
表格 由 三 个 基本 部 分 组 成 : 行 、 列 和 单元 格 。 在 表格 中 ， 被 线条 分 开 的 一 个 一 个 小 格 
被 称 为 单元 格 ， 其 中 可 插入 文字 、 图 像 等 对 象 ， 分隔 单元 格 的 线条 被 称 为 边框 ;位 于 水 平 
方向 上 的 一 行 单元 格 称 作 一 行 ， 位 于 垂直 方向 上 的 一 列 单元 格 称 作 一 列 。 单 元 格 是 表格 的 
基本 组 成 部 分 
下 面 以 在 网 页 中 插入 一 个 3 行 3 列 的 表格 为 例 ， 演 示 在 网 页 中 创建 一 个 表格 的 具体 操作 
步骤 。 本 例 执 行 以 下 操作 : 
019 在 “插入 ”/“ 常 用 ”面板 上 单 击 插入 表格 图 标 按钮 时， 或 选择 “插入 ”/“ 表 格 ” 
表单 命令 ， 打 开 图 7-1 所 示 的 “表格 ”对 话 框 。 


边框 粗细 : 
单元 格 过 距 : 
单元 格 间距 : 


辅助 功能 
标题 : | 
摘要 : 


图 7-1 “表格 ”对 话 框 


02 在 “ 行 数 ”文本 框 中 输入 表格 的 行 数 3。 在 “ 列 数 ”文本 框 中 输入 表格 的 列 数 3。 

03 在 “表格 宽度 ”后 面 的 文本 框 中 键入 表格 的 宽度 ， 然 后 在 其 后 的 下 拉 列 表 框 中 
选择 计量 单位 。 如 果 选 择 的 单位 为 “百分比 ”， 则 会 按照 浏览 器 的 视窗 宽度 来 调整 表格 相 
对 的 百分比 宽度 。 本 例 为 默认 设置 。 

04 朋 在 “边框 粗细 ”后 面 的 文本 框 中 输入 表格 的 边框 厚度 ， 以 像素 为 单位 。 设 置 为 0 
时 不 显示 边框 。 本 例 选 择 2。 
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= 提示 :在 。 沪 框 粗细 ”文本 框 中 输入 的 是 表格 边框 的 宽度 ， 表格 中 的 单元 格 的 边 | 


05 上 用 在 “单元 格 边 距 ” 文 本 框 中 键入 单元 格 中 的 内 容 与 边框 的 间距 。 本 例 设 置 为 2。 

06 旧 在 “单元 格 间 距 ” 后 的 文本 框 中 键入 表格 中 单元 格 间 的 距离 ， 相 当 于 设置 单元 
格 的 边框 厚度 。 本 例 设 置 为 2。 

07 贞 在 “页 由 ”和 栏 选 择 页 巾 显 示 方 式 ， 有 四 个 选项 分 别 是 : “无 ”、“ 左 ”、“ 顶 
部 ”和 “两 者 ”， 其 具体 效果 见 相 应 的 图 标 。 本 例 选 择 “ 无 ”。 

08 在 “标题 ”文本 框 输入 标题 “第 一 张 表 格 ”。 

09 上 在“ 对齐 标题 ”后 面 的 下 拉 列 表 中 选择 表格 标题 的 对 齐 方式 : “顶部 ”标题 
在 表格 上 方 ) 、“ 底 部 ”《〈 标 题 在 表格 下 方 ) 、“ 左 ”《 标 题 在 表格 左边 ) 、“ 右 ”《 标 
题 在 表格 右边 ) 和 “上 献 认 ”【〔 标 题 在 表格 上 方 即 同 “ 顶 部 ”选项 ) 。 本 例 选 择 “ 顶 部 ”。 

10 虽 在 “摘要 ” 柱 键 入 表格 的 说 明 等 信息 ， 对 表格 的 显示 无 影响 。 

1 单 击 “确定 ”按钮 完成 插入 表格 ， 最 终 制 作 结 末 ， 如 网 7-2 所 示 。 


提示: , 果 插 入 表格 时 对 行 、 列 及 单元 格 边 距 等 参数 进行 了 设置 ， 则 下 一 次 插入 


葡 套 表格 技术 可 以 实现 复杂 的 布局 设计 。 所 谓 航 套 表 格 ， 就 是 在 一 个 表格 的 单元 格 内 
包含 男 一 个 表格 。 可 以 像 对 非 蔡 套 表 格 一 样 对 岁 套 表格 进行 格式 设置 ， 但 是 其 宽度 受 它 所 
在 单元 格 的 宽度 的 限制 。 

若 要 在 表格 单元 格 中 髓 套 表格 ， 可 以 单 击 现 有 表格 中 的 一 个 单元 格 ， 再 在 单元 格 插入 
表格 。 例如, 在 图 7-2 所 示 的 3 行 3 列 的 表格 的 中 间 单 元 格 中 插入 一 个 2 行 3 列 的 表格 就 形成 一 
个 如 网 7-3 所 示 的 般 套 表格 。 


第 一 号 表格 


图 7-2 ”插入 表格 图 7-3 ” 藤 套 表格 
在 页 面 上 绘制 多 个 表格 或 人 藤 套 表格 时 ，Dreamweaver 目 动 探 制 ， 不 允许 表格 重 登 。 


提示 :4 作 庆 大 表格 应 遵循 以 下 两 个 原则 : 


Lo -一 -~ 一 


沸 昌 idVdT 黄 江 最/ 坝 
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1、 从 外 向 内 工作 。 即 先 建立 最 大 的 表格 ， 青 在 其 内 部 创建 较 小 的 表格 。 
2、 设 置 外 部 表格 的 宽度 时 使 用 绝对 值 ， 设 置 内 部 表格 的 宽度 时 使 用 相对 值 。 当 然 这 
不 是 一 个 不 容 改 变 的 规则 ， 但 最 好 将 外 部 表格 宽度 设置 成 一 个 特定 的 绝对 像素 值 ， 而 
将 内 部 表格 宽度 设置 为 相对 的 百分比 数 ， 如 果 内 部 表格 宽度 也 设 为 一 个 绝对 的 像素 
一 一 
在 文档 中 插入 表格 后 ， 可 以 在 表格 中 输入 各 种 数据 。 输 入 数据 或 插入 图 像 的 方法 是 先 
将 光标 放置 在 需要 插入 数据 的 单元 格 中 ， 然 后 直接 输入 数据 或 插入 图 像 即 可 。 


| = 提示 :在 表格 中 加 入 文本 后 ,如 果 要 在 表格 文字 前 加 入 空格 , 可 以 通过 组 合 键 Ctrl 


; 十 Shift + Space 进行 输入 。 


7.2 设置 表格 和 单元 格 属性 


选中 表格 或 单元 格 后 ， 即 可 在 对 应 的 属性 面板 上 修改 选 定 的 表格 元 又 的 属性 。 表 格局 
性 面板 中 的 绝 大 多 数 属 性 与 “表格 ”对 话 框 中 的 参数 相同 ， 不 再 资 述 。 下 面 简要 介绍 一 坚 
没有 介绍 过 的 属性 。 

选中 表格 ， 执 行 “ 窗 口 ”/“ 属 性 ”命令 ， 展 开 表格 属性 和 面板， 如 图 7-4 所 示 。 


4 
川 


属性 | 
于 表格 行 @)3 ”| 宽 mD 200 || 借 来 | 填充 (人) 对 齐 @) | 忠 、 [加 | 3s@C) | 无 | @ 
< v| 列 (C) 1 间距 (5) 边框 (8) 0 © 


| 一 ?| 
全 I 国 


i 


图 7-4 表格 属性 面板 


对 表格 属性 面板 的 各 选项 功能 说 明 如 下 ; 
“表格 ”: 用 于 设置 表格 的 名 称 。 

“ 行 ”和 “ 列 ”: 用 于 设置 表格 的 行 数 和 列 数 。 
“ 宽 ”: 用 于 设置 表格 的 宽度 。 
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“填充 ”: 用 于 设置 表格 内 单元 格 的 内 容 和 边框 的 间距 ， 即 “表格 ”对 话 框 中 的 “单元 


格 边 距 ”。 
“间距 ”: 用 于 设置 表格 内 单元 格 间 的 距离 ， 即 “表格 ”对 话 框 中 的 “单元 格 间距 ”。 


“对 齐 ”: 用 于 设置 表格 在 文档 中 相对 于 同一 段落 中 的 其 它 元 聚 〈 例 如 文本 或 图 像 的 


显示 位 置 。 
“类 ”: 用 于 设置 应 用 于 表格 的 CSS 样式 。 
“边框 ”: 设置 边框 的 宽度 。 


号 ;清除 列 宽 ， 单 击 此 按钮 将 表格 的 列 宽 压 缩 到 最 小 值 ,但 不 影响 单元 格 内 元 素 的 显示 。 


表格 在 清除 列 宽 前 后 的 效果 如 网 7-5 所 示 。 


下 :清除 行 高 , 单 击 此 按钮 将 表格 的 行 高 压缩 到 最 小 值 ， 但 不 影响 单元 格 内 元 素 的 显示 。 


将 图 7-5 右 图 清除 行 融 后 的 效果 如 图 7-6 所 示 。 
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图 7-5 ”清除 列 宽 前 后 图 7-6 ”清除 行 高 


和 全: 将 表格 宽度 的 单位 转化 为 像素 〈 即 固定 大 小 ) 。 

人 笃 : 将 表格 宽度 的 单位 转化 为 百分比 〈 即 相对 大 小 ) 。 

如 果 要 设 年 单元 格 的 属性 ， 则 选中 单元 格 ， 执行 “窗口 ”/“ 属 性 ”命令 展开 单元 格 属 
性 面板 进行 修改 ， 如 图 7-7 所 示 。 


尾 性 


[oa | 本 四 类 EEC @ 
cs | DO su gD 上 @ 区 
国 | 单元 格 。 水 平 四 | 默认 ”|[v| 宽 四 不 换行 @) 门 。 背景 颜色 (@) [| 页 面 属性 . 

一 口交 委 直 人) 黑人 |v| 高 如 标题 EE) 口 . 
属性 

> HITHL 目标 规则 .background x| | 字体 (0) 默认 字体 Iv|B 了 主 琶 二 县 ® 
EE 本] -ET | 大 小 [LE 区 
国 | 单元 格 。 水 平 外 默认 |v| 宽 中 不 换行 @) 口 。 背 上 颜色 (GE) 厂 J 页 面 属性 

一 加 其 重 直 | 默认 |x| 高 如 标题 @E) 口 


图 7-7 单元 格 属性 面板 


单元 格 属性 面板 分 为 图 7-7 所 示 的 HTML 和 CSS 两 个 面板 ， 每 一 个 面板 又 分 为 两 部 分 。 
HTML 属 性 面板 的 上 部 分 用 于 设置 单元 格 内 文本 内 容 的 基本 属性 , 各 选项 功能 不 再 蒙 述 (请 
见 第 4 章 的 相应 部 分 ) 。 下 部 分 用 于 设置 单元 格 的 属性 ， 各 选项 功能 简要 说 明 如 下 : 

“水 平 ”: 设置 单元 格 内 容 的 水 平 对 齐 方式 。 

“垂直 ”: 设置 单元 格 内 容 的 垂直 对 齐 方式 。 

“ 宽 ” 和 “高 ”: 设置 单元 格 的 宽度 和 高 度 。 

“不 换行 ”: 单元 格 按 需 要 增加 列 宽 以 适应 文本 ， 而 不 是 在 新 的 一 行 上 继续 文本 。 

“标题 ”: 设置 单元 格 为 标题 单元 格 。 标 题 单元 格 内 的 文字 将 以 加 粗 黑 体 显示 。 

“背景 颜色 ”: 用 于 设置 单元 格 的 背景 颜色 。 


jE: 将 选 定单 元 格 拆 分 为 多 行 或 多 列 。 
目 Dreamweaver CS4 开 始 ， 用 户 不 能 直接 在 属性 面板 上 设置 表格 或 单元 格 的 背景 图 像 
了 。 如 果 希 望 将 图 像 设 置 为 表格 或 单元 格 的 背景 ， 束 要 用 到 表格 属性 的 CSS 设 置 面板 。 
在 Dreamweaver CS6 中 通过 新 建 CSS 规 则 设置 表格 和 单元 格 背 景 图 像 的 一 般 操 作 步 又: 
01 执行 “插入 ”/“ 表 格 ” 沫 单 命 令 ， 在 弹出 的 “表格 ”对 话 框 中 设置 表格 的 宽度 
为 300 像 素 ， 行 数 为 ?3， 列 数 为 3， 边 框 粗细 为 1。 
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02 昌 将 光标 置 于 第 一 行 第 一 列 的 单元 格 中 ， 然 后 单 击 其 属性 面板 左上 角 的 眙 55s 按 
钮 ， 在 “目标 规则 ”下 拉 列 表 中 选择 “新 CSS 规 则 ”并 单 击 “编辑 规则 ”按钮 打开 “新 
建 CSS 规 则 ”对 话 框 。 

03 肯 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “标签 ”， “选择 嚣 名称” 选择 xd，“ 规 则 定 
义 ” 选 择 “ 仅 限 该 文档 ”。 然 后 单 击 “ 确 定 ” 按 钮 打开 对 应 的 规则 定义 对 话 框 。 

04 9 在 对 话 框 左 侧 的 “分 类 ”列表 中 选择 “背景 ”， 然 后 单 击 “ 背 景 图 像 ” 右 侧 “ 浏 
史 ” 按 钮 ， 在 弹出 的 资源 对 话 框 中 选择 喜欢 的 背景 图 厂 。 单 击 “ 人 确定 ”按钮 关闭 对 话 框 。 

此 时 ， 在 文档 窗口 中 可 以 看 到 表格 中 所 有 的 单元 格 都 日 动 应 用 了 选择 的 背景 图 片 。 效 
果 如 图 7-8 所 示 。 

如 果 希 望 不 同 的 单元 格 应 用 不 同 的 背景 图 像 ， 则 选中 要 设置 背景 图 像 的 日 元 格 之 后 ， 
在 上 述 步 又 中 的 第 03N 步 中 的 “选择 器 类 型 ”下 拉 列 表 中 选择 “类 ”， 然 后 在 “选择 跨 
名 称 ” 中 键入 名 称 ， 如 .backsgroundl1。 效 果 如 图 7-9 所 示 。 
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图 7-8 ”设置 单元 格 背景 图 像 图 7-9 ”设置 单元 格 背景 图 像 
表格 的 行 和 列 的 属性 与 单元 格 的 属性 面板 一 样 ， 在 此 不 再 资 述 。 


-i 注意 
电 使 用 属 | 生 检 查 器 更 改 衣 格 和 单元 格 的 属性 时 ,需要 注意 表格 格式 设置 的 优 


人 单元 格格 式 设 置 优先 于 行 格 式 设 置 ， 行 格式 设置 又 优先 于 表格 格式 设置 。 例 
， 如 果 将 单个 单元 格 的 背景 颜色 设置 为 蓝 色 ， 然 后 将 整个 表格 的 背景 颜色 设置 为 黄 
册 则 蓝 色 单元 格 不 会 变 为 黄色 ， 因 为 单元 格格 式 设置 优先 于 表格 格式 设置 。 


7.3 表格 常用 操作 


Dreamweaver 的 表格 功能 影 啊 着 当前 Web 页 设计 的 流行 趋势 。 拖 放 表 格 设置 尺寸 、 简 
便 的 行列 组 合 、 单 元 格 与 表格 的 复制 与 粘贴 ， 以 及 表格 数据 的 导入 导出 和 排序 ， 使 用 户 在 
很 短 的 时 间 内 完成 大 量 的 表格 任务 成 为 可 能 。 这 些 表 格 编辑 特性 已 在 Dreamweaver 中 得 到 
了 很 大 的 体现 。 


7.3.1 选择 表格 元 素 


在 对 表格 进行 操作 之 前 ， 必 须 先 选 中 表格 元 素 。 在 Dreamweaver 中 ， 用 户 可 以 一 次 选 
中 整个 表格 、 一 行 表格 单元 、 一 列表 格 单元 或 者 儿 个 连续 的 或 不 连续 的 表格 单元 。 

1. 选择 整个 表格 ”选择 表格 可 以 执行 以 下 操作 之 一 : 

(1) 将 光标 放置 在 表格 的 任 一 单元 格 中 ， 然 后 单 击 文档 窗口 底部 的 <table> 标 记 ; 
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(2) 执行 “修改 ”/“ 表 格 ”/“ 选 择 表格 ”命令 ; 

(3) 在 表格 的 边框 线 上 单 击 ; 

选取 了 整个 表格 之 后 ， 表 格 的 周围 会 出 现 辕 色 的 控 柄 ， 如 图 7-10 所 示 。 

2. 选中 一 行 或 一 列 单元 格 ”选择 一 行 或 一 列 单元 格 可 以 执行 以 下 操作 之 一 : 

(1) 将 光标 放置 在 一 行 表 格 单元 的 左边 界 上 ， 或 将 光标 放置 在 一 列表 格 单元 的 顶端 ， 
当 指 针 变 为 黑色 箭头 时 单 击 鼠 标 ; 

(2) 单 击 一 个 表格 单元 ， 横 癌 或 纵 癌 拖 动 鼠标 可 选择 一 行 或 一 列表 格 单元 。 

选中 一 行 和 一 行 表格 单元 的 效果 如 图 7-11 所 示 。 


4 | TT 
-一 

ee 
图 7-10 ”选中 整个 表格 图 7-11 选中 一 行 、 一 列表 格 单元 


3. 选中 多 个 连续 的 表格 单元 。 

(1) 单 击 一 个 表格 单元 ， 然 后 纵向 或 横向 拖 动 鼠 标 到 另 一 个 表格 单元 ; 

(2) 单 击 一 个 表格 单元 ， 然 后 按 住 Shift 键 单 击 男 一 个 表格 单元 ， 所 有 和 矩形 区 域内 的 
表格 单元 都 被 选择 。 

4. 选中 多 个 连续 的 表格 单元 后 的 效果 如 图 7-12 所 示 。 选中 多 个 不 连续 的 表格 单元 按 住 
Ctrl 键 ， 单 击 多 个 要 选择 的 表格 单元 。 选 中 多 个 不 连续 的 表格 单元 后 的 效果 如 图 7-13 所 示 。 


图 7-12 ”选中 多 个 连续 表格 单元 图 7-13 ”选中 多 个 不 连续 表格 单元 


7.3.2 调整 表格 的 尺寸 、 行 高 和 列 宽 


在 网 页 制作 过 程 中 ， 调 整 表 格 和 单元 格 的 大 小 是 经 常 性 的 操作 。 

1. 调整 表格 的 大 小 ”选中 表格 后 ， 在 表格 周围 的 黑色 控 柄 上 按 下 鼠标 元 键 ， 并 沿 相 
应 的 方 回 拖 动 ， 即 可 调整 表格 的 大 小 。 

(1) 拖 动 右 下 角 的 手柄 ， 可 以 在 两 个 方向 上 同时 调整 表格 的 大 小 ; 

(2) 拖 动 表格 撒 边框 上 的 手柄 ， 可 以 调整 表格 的 高 度 ; 

(3) 拖 动 右边 框 上 的 手柄 ， 可 以 调整 表格 的 宽度 。 

当 调 整整 个 表格 大 小 时 ， 其 中 的 所 有 单元 格 大 小 会 按 比 例 缩放 。 如 本 表格 的 单元 格 被 
指定 了 明确 的 宽度 和 高 度 ， 则 调整 表格 大 小 会 在 文档 窗口 中 更 改 单 元 格 的 可 视 大 小 ， 但 不 
会 更 改 这 些 单元 格 的 实际 客 度 和 噩 度 。 

2. 将 表格 的 宽度 或 高 度 减 到 最 小 ”选择 整个 表格 ， 然 后 选择 “修改 /“ 表 格 ”/“ 清 除 
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单元 格 宽度 ”或 “清除 单元 格 高 度 ”命令 ， 对 所 有 单元 格 的 宽度 、 高 度 进行 压缩 ， 直 到 内 容 
最 多 的 单元 格 与 上 下 左右 边界 之 问 没有 空隙 为 下 : 

3， 调 整 行 高 将 光标 放 在 行 的 底 边框 上 ， 当 光标 变 为 上 下 箭头 时 ， 拖 动 光标 。 通 过 拖 动 
行 的 底 边 线 改变 行 的 高 度 时 ， 如 果 该 行 不 是 最 下 面 的 行 ， 则 相 邻 行 的 高 度 自动 调整 ， 使 表格 
的 总 高 度 不 变 ， 如 果 是 表格 的 最 下 面 的 行 ， 则 表格 的 总 高 度 发 生变 化 ， 所 有 行 按 比例 变 高 或 
变 罕 。 

4. 调整 列 宽 “将 光标 放 在 列 的 右边 框 上 ， 当 光标 变 为 左右 箭头 时 ， 拖 动 光标 。 通 过 拖 动 
列 的 右边 线 改变 列 的 宽度 时 ， 如 果 该 列 不 是 最 右边 的 列 ， 则 相 邻 列 的 宽度 自动 调整 ， 使 表格 
的 总 宽度 不 变 ， 如 果 是 表格 的 最 右边 列 ， 则 表格 的 总 宽度 发 生变 化 ， 所 有 列 按 比例 变 宽 或 变 
入。 

5， 转 换 表格 单位 选择 整个 表格 ， 然 后 选择 “修改 ”/“ 表 格 ”/“ 转 换 宽度 为 百分比 ” 
或 “转换 宽度 为 像素 ”命令 ， 即 可 将 表格 的 宽度 转换 为 以 百分数 或 像素 为 单位 ， 同 理 转换 表 
格 的 高 度 。 

此 外 ， 用 户 还 可 以 通过 属性 面板 上 的 “ 宽 ” 和 “高 ”属性 设置 表格 的 大 小 、 行 高 及 列 


7.3.3 使 用 扩展 表格 模式 


表格 是 在 标准 模式 下 和 直接 插入 的 ， 其 最 初 的 用 途 是 显示 表格 式 数 据 。 虽 然 它 也 能 任意 
改变 大 小 和 行列 ， 但 在 页 面 中 编辑 表格 和 表格 中 的 数据 并 不 方便 。 本 市 中 将 介绍 
Dreamweaver CS6 中 的 扩展 表格 模式 。“ 扩 展 表格 ”模式 临时 间 文 档 中 的 所 有 表格 添加 单 
元 格 边 距 和 间距 ， 并 且 增 加 表格 的 边框 ， 便 于 在 表格 内 部 和 表格 周 于 选择 。 
下 和 面 演示 切换 a 到 表格 的 “扩展 ”模式 下 的 其 体操 作 步 又 。 
01 9 由 于 在 “代码 ”视图 下 无 法 切换 a 到 表格 的 “扩展 ”模式 ， 所 以 应 先 将 当前 文档 
窗口 的 视图 切换 到 “设计 ”视图 或 “ 拆 分 ”视图 。 
02 在 文档 窗口 插入 一 个 表格 ， 如 图 7-14 上 所 示 。 
03 自 执行 以 下 操作 之 一 : 
@ 执行 “人 查看 ”/“ 表 格 模 式 ”/“ 扩 展 表格 模式 ” 亲 蛙 命令 。 
@ 按 下 Alt+F6 快捷 组 合 键 。 
@ 在 “插入 ”面板 的 “布局 ”类 别 中 ， 单 击 “ 扩 展 ” 按 钮 ， 如 图 7-15 所 示 。 


Ea < 
插入 直 展 表 格 模 式 (ht+F6) 


插入 流体 网 格 布局 Div 标签 一 
绘制 好 Div 
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图 7-14 ”标准 模式 下 的 表格 图 7-15 ”切换 到 扩展 模式 


此 时 ， 弹 出 “扩展 表格 模式 入 门 ”对 话 框 ， 单 击 “ 人 确定” 按钮， 文档 窗口 的 项 部 会 出 
现 “ 扩 展 表格 模 陈 标记 ， 且 文档 窗口 工作 区 中 的 所 有 表格 目 动 讨 加 了 单元 格 边 距 与 间距 ， 
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并 增加 了 表格 边框 ， 如 图 7-16 所 示 。 
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图 7-16 表格 的 扩展 模式 
利用 扩展 模式 ， 用 户 可 以 选择 表格 中 的 项 目 或 者 精确 地 放置 插入 点 。 例 如 可 以 将 插入 


点 放置 在 图 像 的 左边 或 右边 ， 从 而 避免 无 意 中 选中 该 图 像 或 表格 单元 格 。 


区 注意 : 


3 扩展 表格 模式 不 像 浏览 器 那样 显示 表 。 一 旦 选择 了 表格 中 的 菜 个 对 象 或 放 


置 了 插入 点 , 移动 表 元 素 或 调整 表 元 素 的 大 小 之 前 , 就 应 该 返回 到 “设计 ”视图 的 “ 标 
准 ” 模 式 下 进行 编辑 。 诸 如 调整 大 小 之 类 的 一 些 可 视 操作 在 “扩展 表格 ”模式 中 不 会 
产生 预期 结果 。 


如 果 要 退出 扩展 表格 模式 ， 可 以 执行 以 下 操作 之 一 : 

@ 单 击 文档 窗口 项 部 “扩展 表格 模式 ” 石 侧 的 “退出 ”。 
@ 执行 “查看 ”/“ 表 格 模式 ”/“ 标 准 模式 ” 闲 单 命令 。 
@ 在 “搬入 ”和 面板 的 “布局 ”类 别 中 ， 单 击 “ 标 准 ” 按 钮 。 
@ 按 下 Alt+F6 快捷 组 合 键 。 


7.3.4 表格 数据 的 导入 与 导出 


在 实际 工作 中 ， 有 时 需要 把 其 他 应 用 程序 〈 如 Microsoft Excel) 建立 的 表格 数据 发 布 
到 网 上 。 如 条 重新 在 Dreamweaver 中 插入 表格 和 数据 ， 可 以 想像 这 是 一 件 很 枯燥 、 烦 琐 的 
事 。 如 果 表 格 数据 庞大 ， 势 必 人 花费 不 少时 间 和 精力 。 科 好 Dreamweaver 有 导入 表格 式 数 所 
的 功能 ， 用 户 只 需要 把 表格 数据 保存 为 之 分 隔 从 格式 的 数据 ， 然 后 导入 到 Dreamweaver 中 ， 
即 可 用 表格 重新 对 数据 进行 格式 化 ， 这 样 大 大 地 方便 了 网 页 制作 的 过 程 ， 节 省 了 制作 表格 
的 时 间 并 有 效 地 你 证 数据 的 准确 性 。 同 样 ， 用 户 也 可 以 把 在 Dreamweaver 中 制作 好 的 表格 
数据 导出 为 文本 文件 。 

1. 导入 表格 式 数 据 ”Dreamweaver 可 以 把 许多 应 用 程序 的 表格 数据 导入 并 生成 日 己 的 
表格 ， 只 要 是 以 分 隔 符 格式 〈 如 制 表 符 、 喜 号 、 骨 号 、 分 号 或 其 他 分 隔 符 ) 保存 的 数据 均 
可 以 导入 其 中 ， 并 且 重 新 格式 化 为 表格 。 

下 和 面 演示 将 文本 文件 数据 导入 为 表格 数据 的 其 体操 作 。 
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019 从 记事 本 中 创建 一 组 这 分 隔 符 格 式 的 数据 ， 如 网 7-17 所 示 。 
02 人 Doan ee 开本 请 和 于 < 和 ef 然后 执行 “文件 ”/“ 导 入 ”/“ 表 格 
式 数 据 ” 命 令 ， 弹 出 “导入 表格 式 数据 ”对 话 框 。 如 网 7-18 上 所 示 。 
03 单 击 “ 数 据 文件 ”后 面 的 “浏览 ”按钮 ， 找 到 需要 导入 的 数据 源 文 件 。 
04 月 在“ 定 界 符 ”下 拉 列 表 杠 中 选择 数据 源 文件 数据 的 分 隔 方式 。 本 例 选 择 “ 喜 号 ”。 
如 果 选 择 了 “其 它 ”, 则 应 在 下 拉 列 表 框 右边 的 文本 框 中 输入 分 隔 表 格 数据 的 分 隔 符 。 


名 tablel - 记事 本 


数据 文件 : | ET | 确定 _ | 
EE J 格式 (0) 查看 (WV) 帮助 00 定 界 符 : Teh | 取消 
站 帮助 
人 | 件 5 开 ， 表格 宽度 : ”匹配 内 容 一 
次 伯 旨 由 支 林 ， I O RE 
设计 师 教 程 , 52， 5 设置 为 : | _ 
单元 格 边 距 : | “| ”格式 化 首 行 : [无 格式 ] v 
单元 格 间 距 : 边框 : |1 | 


图 7-18 “导入 表格 式 数 据 ” 对 话 框 


C3》 如 果 不 指 定 文件 所 使 用 的 分 隔 符 ， 文 件 将 不 能 正确 导入 ， 则 数据 也 不 能 
表格 中 正确 格式 化 ， 


05 用 在 “表格 宽度 ”区 域 设 置 表格 的 宽度 。 如 果 选 中 “匹配 内 容 ”， 则 跟 据 数据 长 度 
目 动 决定 表格 宽度 。 如 果 选 中 “设置 为 ”， 则 可 在 右 侧 的 文本 框 中 输入 表格 宽度 数值 ， 并 
可 在 下 拉 列 表 中 选择 宽度 的 计量 单位 。 本 例 选 中 “匹配 内 容 ”。 

06 设置 单元 格 边 中 和 竺 元 格 间 距 ， 并 将 边框 设置 为 1。 

07 生 在 “格式 化 首 行 ”下 拉 列 表 中 选中 “ 粗 体 ”选项 。 

0 四 单 击 “ 确 定 ” 投 钮 ， 即 可 导入 表格 数据 ， 效 泉 如 图 7-19 所 示 。 


名 称 定价 | 数量 
信息 系统 设计 与 开发 55 ||48 | 
贱 件 测试 技术 |21 |[35 | 
系统 设计 师 教程 52 9 | 


图 7-19 ”导入 数据 后 的 效果 
2， 导 出 表格 数据 
在 Dreamweaver 中 ， 还 可 ee 出 到 文本 文件 中 ， 相 邻 单元 格 的 内 容 由 分 隅 
从 隅 开 。 可 以 使 用 的 分 隔 从 有 如 写 、 冒 号、 分 写 或 容 格 。 导 出 必须 是 整个 表格 ， 不 能 选取 
表格 的 一 部 分 导出 。 如 果 只 需要 表格 中 的 菜 些 数据 ， 则 应 创建 一 个 新 表格 ， 将 所 需要 的 信 
县 复制 到 新 表格 中 ， 再 将 新 表格 导出 。 
下 面 通过 一 个 向 单 实例 演示 将 表格 数据 导出 为 文本 文件 的 具体 操作 步骤 。 
01 在 Dreamweaver 文 档 窗口 中 创建 一 个 表格 , 并 在 表格 中 输入 数据 。 如 图 7-20 所 
02 肯 将 光标 放置 在 该 表格 中 或 选中 该 表格 ， 然 后 执行 “文件 ”/“ 寻 出 ”/“ 表 格 ” 
令 ， 弹 出 “导出 表格 ”对 话 框 。 如 图 7-21 所 示 。 
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产品 名 称 型 号 报价 


= SGH-E908 2599 


三星 SGH-iT18 4950 
堪 基 亚 NT3 3399 
| 诺基亚 N95 3888 


图 7-20 ”表格 数据 


03 肯 在 “ 定 界 符 ”下 拉 列 表 框 中 选择 一 种 表格 数据 输出 到 文本 文件 后 的 分 隔 符 。 其 
中 “Tab” 表 示 使 用 制 表 符 作 为 数据 的 分 隅 符 ， 该 项 是 默认 设置 ，“ 空 日 键 ” 表 示 使 用 空 
格 作 为 数据 的 分 隅 从，“ 逗 点 ”表示 使 用 逗号 作为 数据 的 分 隅 人 符 ; “分 号” 表示 使 用 分 与 
作为 数据 的 分 隔 符 ，“ 骨 号 ”表示 使 用 骨 号 作为 数据 的 分 隔 符 。 本 例 使 用 默认 设置 。 

04 在 “换行 从 ”下 拉 列 表 框 中 选择 一 种 表格 数据 输出 到 文本 文件 后 的 换行 方式 。 
其 中 “Windows” 表 示 按 Windows 系 统 格式 换行 ;， “Mac” 表示 按 苹 果 公 司 的 系统 格式 换 
行 ，“UNIX” 表 示 按 UNIX 的 系统 格式 换行 。 本 例 使 用 默认 设置 。 

05 设置 完成 之 后 ， 单 击 “ 导 出 ”按钮 ， 弹 出 “表格 导出 为 ”对 话 框 。 在 保存 文件 窗 
口中 输入 一 个 文件 名 ， 可 以 不 使 用 扩展 名 ， 也 可 以 使 用 一 个 文本 类 型 的 扩展 名 ， 本 例 键入 
tablel.txt。 然 后 蛙 击 “保存 ”按钮 完成 表格 数据 导出 。 

06 使 用 “记事 本 ”应 用 程序 打开 该 文件 ， 内 容 如 网 7-22 所 示 。 


锅 table2 - 记事 本 

文件 灾 ) 编辑 于 】 格式 (0) 查看 (WV) 帮助 0 
产品 名 称 ,型 号 ,报价 

三 星 ,SG 


H-E988 ,2599 
三 星 ,SGH-i718 ,4956 
1 若 基 亚 ,N73 ,3399 
1 若 基 亚 ,N95 ,8888 


图 7-21 表格 数据 图 7-22 ”表格 数据 文件 


7.3.5 ” 增加、 删除 行 和 列 


在 Dreamweaver CS6 中 增加 、 删 除 行 或 列 也 非常 简单 ， 下 面 简要 介绍 增加 、 删 除 行 和 
列 的 操作 步骤 。 
1. 执行 以 下 方法 之 一 删除 一 行 : 
(1) 将 光标 定位 于 要 删除 行 中 任 一 单元 格 中 ， 执 行 “ 修 改 ”/“ 表 格 ”/“ 删 除 行 ”命令 。 
(2) 将 光标 放置 在 指定 行 的 左边 界 上 ， 当 黑色 第 头 出 现时 单 击 女 标 选中 该 行 ， 然 后 按 
Delete 键 删 除 行 。 
(3) 右 击 要 删除 行 中 任 一 单元 格 ， 在 弹出 的 快捷 染 单 中 执行 “表格 ”/“ 删 除 行 ”命令 。 
2. 执行 以 下 方法 之 一 删除 一 列 : 
(1) 把 光标 定位 于 要 删除 列 中 任 一 单元 格 中 ， 执 行 “修改 ”/“ 表 格 ”/“ 州 队列 ”命令 。 
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(2) 将 光标 放置 在 指定 列 的 上 边界 上 ， 当 墨色 箭头 出 现时 单 击 鼠 标 选 中 该 列 ， 然 后 按 
Delete 键 删 除 列 。 

(3) 右 击 要 删除 列 中 任 一 单元 格 ， 在 弹出 的 快捷 染 单 中 执行 “表格 ”/“ 删 除 列 ”命令 。 
3. 执行 以 下 方法 之 一 增加 一 行 : 

(1) 将 光标 定位 于 某 一 个 单元 格 中 ， 执 行 “修改 ”/“ 表 格 ”/“ 插 入 行 ”命令 。 

(2) 执行 “插入 ”/“ 表 格 对 象 ”/“ 在 上 面 插入 行 ” 命 令 ， 插 入 一 行 。 

(3) 碳 击 单元 格 ， 在 弹出 的 上 下 文 某 单 中 执行 “表格 ”/“ 插 入 行 ” 命 令 ， 插 入 一 行 。 
4. 执行 以 下 方法 之 一 增加 一 列 : 

(1) 将 光标 定位 于 单元 格 中 ， 执 行 “ 修 改 ”/“ 表 格 ”/“ 插 入 列 ” 命 令 ， 插 入 一 空 列 。 

(2) 执行 “插入 ”/“ 表 格 对 象 ”/“ 在 左边 插入 列 ” 命 令 ， 捅 入 一 空 列 。 

(3) 石 击 单元 格 ， 在 弹出 的 上 下 文采 蛙 中 执行 “表格 ”/“ 插 入 列 ” 命 令 ， 插 入 一 空 列 。 


7.3.6 复制 、 粘 贴 与 清除 单元 格 


在 Dreamweaver CS6 中 ， 用 户 可 以 非 第 灵活 地 复制 及 粘贴 单元 格 ， 并 保留 这 些 单 元 格 
的 格式 ， 也 可 以 只 复制 和 粘贴 单元 格 中 的 内 容 。 可 以 一 次 只 复制 及 粘贴 一 个 单元 格 ， 也 可 
以 一 次 复制 及 粘贴 一 行 、 一 列 乃 至 多 行 多 列 单元 格 。 
下 面 简要 介绍 复制 、 粘 贴 单 元 格 内 容 的 操作 步骤 。 
(1) 选择 表格 中 的 一 个 或 多 个 单元 格 。 所 选 的 单元 格 必 须 是 连续 的 ， 并 且 形 状 必须 
为 滤 形 。 
(2) 忌 标 右 击 选中 的 单元 格 ， 在 弹出 的 上 下 文康 单 中 执行 “复制 ”命令 。 
(3) 选择 要 粘贴 单元 格 的 位 置 。 知 要 用 在 剪贴 板 的 单元 格 奉 换 现 有 的 单元 格 ， 应 选 
择 一 组 与 王 贴 板 上 的 单元 格 具 有 相同 布局 的 现 有 单元 格 。 例如, 如 果 复 制 或 剪 切 了 一 块 3x2 
的 单元 格 ， 则 可 以 选择 另 一 块 3x2 的 单元 格 通过 粘贴 进行 蔡 换 。 寿 要 在 特定 单元 格 所 在 行 
粘贴 一 整 行 单元 格 ， 则 单 击 该 单元 格 。 大 要 在 特定 单元 格 左 侧 粘 贴 一 整 列 单元 格 ， 则 单 击 
该 单元 格 。 大 要 用 粘贴 的 单元 格 创建 一 个 新 表格 ， 则 将 插入 点 放置 在 表格 之 外 。 
(4) 把 光标 定位 于 目标 表格 的 单元 中 ， 忌 标 右 击 目标 单元 格 ， 在 弹出 的 上 下 文 滋 单 
中 执行 “粘贴 ”命令 ， 完 成 粘贴 。 
在 精 贴 多 个 单元 格 时 ， 豆 贴 板 中 的 内 容 必 须 和 粘贴 目的 地 的 表格 或 表格 中 选择 段 的 结 
构 是 相同 的 ， 人 否则 将 弹出 一 个 对 话 框 ， 提 示 无 法 完成 粘贴 操作 。 


vy 注意 : 

一 如 果 剪 贴 板 中 的 单元 格 不 到 一 整 行 或 一 整 列 ， 并 且 单 击 某 个 单元 格 然后 烙 
贴 剪 贴 板 中 的 单元 格 ， 则 所 单 击 的 单元 格 和 与 它 相 邻 的 单元 格 可 能 (根据 它们 在 表格 
中 的 位 置 ) 被 粘贴 的 单元 格 替换 。 


各 要 清除 单元 格 中 的 内 容 ， 可 以 执行 以 下 操作 步骤 ; 
(1) 选择 一 个 或 多 个 单元 格 中 的 内 容 ， 且 这 上 坚 单元 格 不 构成 一 行 或 一 列 。 
(2) 执行 “编辑 ”/“ 清 除 ” 沫 单 命令 ， 或 直接 投 键 盘 上 的 Delete 键 。 
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如 果 选 定 的 多 个 单元 格 为 一 行 或 一 列 ， 则 执行 上 述 操作 后 ,将 从 表格 中 删除 整个 行 或 
列 ， 而 不 仅仅 是 单元 格 中 的 内 容 。 


7.3.7 合并 、 拆 分 单元 格 


在 一 般 的 情况 下 ， 表 格 纵横 方 癌 单元 格 的 大 小 一 致 ， 而 在 网 页 设计 中 ， 表 格 的 布局 是 
多 样 的 ， 所 以 必须 对 其 中 的 一 些 单 元 格 进行 合并 或 拆 分 。 在 Dreamweaver 中 ， 可 以 合并 任 
意 数 量 的 相 邻 单元 格 ， 但 整个 选中 区 域 必须 是 窍 形 的 ; 也 可 以 将 一 个 单元 格 拆 分 为 任意 数 
量 的 行 或 者 列 。 

下 面 演示 这 些 操作 的 具体 步骤 。 

01 9 在 文档 中 插入 图 7-23 所 示 的 表格 。 
02 选中 所 要 合并 的 单元 格 “ 合 并 ”和 “单元 格 ”。 
03 通过 以 下 方法 之 一 合并 选中 的 单元 格 : 

单 击 属性 面板 中 的 名 按钮 ， 合 并 单元 格 。 

执行 “修改 ”/“ 表 格 ”/“ 合 并 单元 格 ” 命 令 ， 合 并 单元 格 。 

有限 标 右 击 选中 的 单元 格 ， 在 弹出 的 上 下 文采 单 中 执行 “表格 ”/“ 合 并 单元 格 ” 命 令 ， 合 
并 单元 格 。 

操作 完成 后 ， 原 来 的 两 个 单元 格 束 合并 为 一 个 ， 如 图 7-24 所 示 。 

04 同样 办 法 合并 单元 格 “Adobe” 和 “Dreamweaver”， 操 作 的 结果 如 图 7-25 所 示 。 


| Bdobe | Dreamweaver ] 23 | 24 ] Bdobe ] Dreatmnweaver ] 23 ] 24 
| 41 | Pr 教程 | 43 | 44 | 41 | Dr 教程 | 43 | 44 
图 7-23 ”插入 表格 图 7-24 合并 单元 格 


05 光标 定位 于 “ 折 分 单元 格 ” 单 元 格 ， 通 过 以 下 方法 之 一 打开 “ 拆 分 单元 格 ” 对 话 
框 ， 如 图 7-26 所 示 。 

单 击 属性 面板 中 的 站 按钮 ， 拆 分 单元 格 。 

执行 “修改 ”/“ 表 格 ”/“ 拆 分 单元 格 ” 命 令 ， 拆 分 单元 格 。 

上限 标 右 击 选中 的 单元 格 ， 在 弹出 的 上 下 文采 单 中 执行 “表格 ”/“ 拆 分 单元 格 ” 命 令 ， 拆 
分 单元 格 。 

06 在 对 话 框 中 选择 “把 单元 格 拆 分 为 列 ”， 在 “ 列 数 ”文本 框 中 输入 2。 单 击 “ 确 

定 ” 完 成 单元 格 拆 分 ， 结 果 如 图 7-27 所 示 。 


| “合并 单 阁 |13| | ES 
bdobeDreatrwearer ] 23 ] 2 本 a 


| 3 引 | 拆 分 单元 格 | 33 | 34 人 
41 | _DIY 教 程 | 43 | 44 


图 7-25 合并 单元 格 (2) 图 7-26 “ 拆 分 单元 格 ” 对 话 框 
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此 外 ， 调 整 行 或 列 的 跨度 也 可 以 实现 合并 、 拆 分 表格 的 效果 。 增 加 行 或 列 的 跨度 就 是 
将 邻近 的 单元 格 的 行 或 列 合并 ， 使 选中 单元 格 的 高 或 宽 扩 展 到 原来 的 两 倍 ， 减 少 行 或 列 的 
跨度 ， 就 是 将 邻近 单元 格 的 行 或 列 进行 拆 分 ， 使 选中 单元 格 的 高 或 宽 缩小 到 原来 的 一 半 。 

07】 光标 定位 于 “14” 单 元 格 ， 然 后 选择 “修改 ”/“ 表 格 ”/“ 增 加 行 宽 ”命令 ， 即 
可 将 “14” 和 “24” 单 元 格 合并 。 同 理 ， 再 次 执行 “增加 行 宽 ”命令 两 次 ， 即 可 将 表格 最 
右 列 合并 为 一 列 ， 效 果 如 图 7-28 所 示 。 
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| 41 | pr 教程 | 43 | 44 | 41 | DIY 教 程 | 43 
图 7-27” 拆 分 单元 格 图 7-28 ”增加 行 宽 的 效 采 


08 将 光标 定位 于 “ 拆 分 单元 格 ” 单 元 格 ， 然 后 选择 “修改 ”/“ 表 格 ”/“ 增 加 列 宽 ” 
命令 ， 即 可 将 “ 拆 分 单元 格 ” 和 其 右 侧 相 邻 的 单元 格 合并 。 同 理 ， 再 次 执行 “增加 列 宽 ” 
命令 ， 然 后 将 光标 定位 在 单元 格 “31” 中 ， 执 行 “ 增 加 列 宽 ”命令 ， 即 可 将 表格 第 三 行 的 
可 三 个 单元 格 合并 为 一 行 ， 效 果 如 图 7-29 所 示 。 

| ”合并 单元 格 | 13 
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图 7-29 ”增加 列 宽 效 末 


7.3.8 表格 数据 排序 


在 表格 中 输入 内 容 时 ， 第 第 需要 对 表格 数据 进行 排序 。Dreamweaver 提 供 了 表格 排序 
的 功能 ， 可 以 对 一 个 基于 单列 内 容 的 简单 表格 排序 ， 也 可 以 对 基于 双 列 内 容 的 较为 复杂 的 
表格 排序 。 但 是 不 能 排序 那些 包含 colspan 或 者 rowspan 属 性 的 表格 ， 也 就 是 那些 包含 有 合 
并 单元 格 的 表格 。 

下 面 演 示 表 格 排 序 的 具体 的 步 又 。 

01 有 将 光标 放置 在 需要 排序 的 表格 中 ， 然 后 选择 “命令 ”/“ 排 序 表格 ”命令 ， 打 开 
“排序 表格 ”对 话 框 ， 如 图 7-30 所 示 。 


\ 注意 


2 排序 表格 ”命令 无 法 应 用 至 使 用 直行 合并 或 横 列 合并 的 表格 。 


02 在 “排序 控 ” 下 拉 列 表 框 选择 需要 进行 排序 的 列 。 本 例 选择 “ 列 3”。 

03 在 “顺序 ”下 拉 列 表 框 中 设置 表格 内 容 排 序列 顺序 。 其 后 的 下 拉 列 表 框 中 有 两 
个 选项 ， 其 中 “升序 2 表示 投 字 母 或 数字 升序 排列 ; “降序 ”表示 按 字 母 或 数字 降序 排列 。 
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本 例 选 择 “ 按 数字 顺序 ” 且 “ 升 序 ”。 


排序 按 : | 列 1 v| 
顺序 : | 按 字母 顺序 悦 | | 升序 


再 按 : 
FE 


选项 : 局 排序 包含 第 一 行 
排序 标题 行 
”排序 脚注 行 
口 完成 排序 后 所 有 行 颜 色 保 持 不 变 


图 7-30 “排序 表格 ”对 话 框 
04 朋 在 “再 按 ” 下 拉 列 表 框 中 选择 第 二 个 需要 进行 排序 的 列 。 本 例 选择 “ 列 4”,“ 按 
数字 顺序 ” 且 “ 降 序 ”。 
.05 和 如 果 第 一 行 不 是 标题 ， 可 以 选中 “排序 包含 第 一 行 ”， 表 示 排 序 时 包括 第 一 行 。 
本 例 不 选择 此 项 。 
0 时 选中 “完成 排序 后 所 有 行 颜 色 保 持 不 变 ”， 然 后 单 击 “ 确 定 ” 投 钮 ， 完 成 操作 。 
排序 前 后 的 表格 如 图 7-31 所 示 。 


图 7-31 ”排序 前 后 的 表格 


y 注意 : 
C2 当 列 的 内 容 是 数字 时 ， 和 选择“ 按 数字 顺序 ”。 如 果 按 字母 顺序 对 一 组 由 一 


位 或 两 位 数组 成 的 数字 进行 排序 , 则 会 将 这 些 数 字 作 为 单词 进行 排序 ( 排序 结果 如 1、 
10、2、20、3、30 ) ， 而 不 是 将 它们 作为 数字 进行 排序 ( 排 友 结果 如 1、2、3、10、 
20、30 ) 。 


7.4 表格 布局 实例 


在 Dreamweaver 中 ， 表 格 主要 应 用 于 网 页 布局 和 内 容 定 位 上 上。 下面 通过 一 个 实例 让 读 
者 更 清楚 地 认识 表格 布局 的 操作 方法 。 本 例 具体 步骤 如 下 : 

01 新 建 一 个 HTML 文档 ， 并 设置 其 背景 图 像 。 

02 单 击 “ 常 用 ”面板 上 的 “表格 ”按钮 国 ， 在 文档 中 插入 一 个 2 行 1 列 、 宽 度 为 750 
像素 的 表格 。 然 后 在 属性 面板 上 设置 表格 的 对 章 方式 为 “居中 对 齐 ”。 
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Dreamweaver CGS6 中 交 版 入 门 与 提高 实例 杂音 


ko3] 选取 表格 第 二 行 的 单元 格 , 单 市 属性 面板 趾 的 “ 拆 分 ”按钮 鞍 将 其 拆 分 为 两 行 。 
ko04] 选取 表格 的 第 二 行 ， 按 照 上 一 步 的 方法 将 其 拆 分 为 5 列 。 
050 将 光标 定位 在 表格 的 第 三 行 中 ， 单 击 “ 常 用 ”面板 上 的 “插入 表格 ”图 标 国 ， 
插入 一 个 一 行 两 列 的 表格 。 

ko06] 将 光标 放 在 贼 套 表格 左 侧 的 单元 格 中 ， 单 击 属性 面板 上 的 拆 分 按钮 ， 将 单元 格 
拆 分 为 3 行 。 此 时 绘制 出 的 表格 决定 了 网 页 的 基本 布局 ， 如 图 7-32 所 示 。 

《07] 在 表格 最 上 面 的 单元 格 中 插入 一 幅 图 片 ， 效 果 如 图 7-33 所 示 。 

&08] 选中 第 二 行 的 所 有 单元 格 ， 单 击 属性 面板 上 的 [本 上 按钮 ， 然 后 在 “目标 规则 ” 
下 拉 列 表 中 选择 “新 CSS 规 则 ”， 然 后 单 击 “ 编 辑 规则 ”按钮 打开 规则 定义 对 话 框 。 

和 09 了 在 “选择 右 类 型 ”下 拉 列 表 中 选择 “类 ”， 在 “选择 帮 名 称 ” 中 键入 .fontcolor， 
在 “规则 定义 ”下 拉 列 表 中 选择 “ 仅 限 该 文档 ”。 然 后 单 击 “ 确 定 ” 按 钮 打开 对 应 的 规则 
定义 对 话 框 。 


图 7-32 ”表格 布局 
路 10] 在 对 话 框 左 侧 的 分 类 列表 中 选择 “背景 闫 色 ”， 然 后 单 击 颜色 井 右 下 角 的 下 拉 


箭头 ， 在 弹出 的 颜色 面板 中 选择 绿色 。 

和 11 在 对 话 框 元 侧 的 分 闫 列表 中 选择 “ 关 型 ”， 然 后 单 击 颜色 并 右 下 角 的 下 拉 箭 头 ， 
在 弹出 的 颜色 面板 中 选择 日 色 。 

和 12 在 对 话 框 左 侧 的 分 类 列表 中 选择 “区 块 ”， 然 后 在 “文本 对 齐 ” 下 拉 列 表 中 选 
择 “ 居 中 ”。 单 击 “ 确 定 ” 按 钮 天 财 对 话 框 。 
届 13】 在 第 二 行 单元 格 中 输入 导航 标题 ， 此 时 的 页 面 效果 如 图 7-34 所 示 。 


加 


荔 wiitleeit Damais 


一 


[tm 1 lek 


图 7-33。 插入 网 页 标题 图 像 图 7-34 在 单元 格 中 输入 内 容 
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pe er 上 


14] 选取 左下 角 的 单元 格 ， 按 照 第 (8) 到 (1 
格 设置 背景 图 像 。 

看 15 朋 在 单元 格 中 键入 页 面 分 栏 内 容 ,然后 新 建 CSS 规 则 设置 文本 格式 。 效 果 如 图 7-35 
所 示 。 

116] 在 右 下 角 的 单元 格 中 输入 文本 ， 并 设置 文本 的 格式 。 

17D 保存 文档 ， 按 下 F12 键 ， 即 可 预览 网 页 的 最 终 效 果 ， 如 图 7-36 所 示 。 

本 例 主 要 讲解 表格 布局 页 面 的 方法 ， 所 以 页 面 中 的 链接 文本 并 没有 设置 ， 有 兴趣 的 读 
者 可 以 进一步 完善 。 


ae 


0) 的 步 绝 新 建 一 个 CSS 规 则 ， 为 单元 


二 wririssra Ii 
i 
| 可 区, wT 


| 
| 


ea | ’ 
0 id 


图 7-35 ”插入 单元 格 背 景 及 文本 


图 7-36 ”网 页 制作 最 终 效 果 
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J, DreaomWearer C056 中 文 豚 入 门 己 粮 高 实例 末 形 
7.5 实例 制作 之 使 用 表格 布局 主页 


在 前 面 的 几 曹 中， 已 制作 了 个 人 网 站 实例 的 导航 条 、“ 人 伊人 风尚 ”页 面 ， 并 创建 了 页 
面 样式 表 。 本 广 将 使 用 表格 制作 主页 ， 步 又 如 下 : 

0 坟 打开 个 人 网 站 实例 的 主页 index.html。 

02 肯 单 击 “常用 ”面板 上 的 表格 图 标 按钮 虽 ， 在 打开 的 “表格 ”对 话 框 中 设置 表格 
的 行 数 为 2， 列 数 为 1， 表 格 宽度 为 700 像 素 ， 边 框 为 0。 单 击 “ 确 定 ” 按 钮 插入 一 个 2 行 1 列 
的 表格 。 选 中 表格 ， 在 属性 和 面板 上 设置 表格 “间距 ”和 “填充 ” 均 为 0， 对 齐 方式 为 “ 居 
中 对 齐 ”。 

03 将 光标 定位 在 第 一 行 的 单元 格 中 ， 在 其 属性 面板 上 将 其 单元 格 内 容 的 水 平 对 章 
方式 设置 为 “居中 对 草 ”， 垂 直 对 章 方式 为 “底部 ”。 然 后 单 击 “ 和 名 用 ”面板 上 的 图 像 按 
钮 图 3， 在 打开 的 对 话 框 中 选择 已 制作 的 LOGO 图 像 ， 单 击 “ 确 定 ” 按 钮 插入 图 像 。 

04 朋 将 光标 定位 在 第 二 行 的 单元 格 中 ， 单 击 属性 面板 上 的 拆 分 单元 格 按钮 区 ， 在 打 
开 的 “ 拆 分 单元 格 ” 对 话 框 中 ， 选 择 “ 列 ”， 且 “ 列 数 ”为 2。 单 击 “ 确 定 ” 投 钮 ， 将 第 
二 行 拆 分 为 两 列 。 

05) 将 光标 放置 在 第 二 行 第 一 列 的 单元 格 中 ， 在 其 属性 面板 上 设置 其 宽度 为 200 像 
素 。 然 后 在 “水 平 ” 下 拉 列 表 中 设置 其 单元 格 内 容 的 对 齐 方式 为 “居中 对 章 ”， 在 “ 王 直 ” 
下 拉 列 表 中 选择 “ 顶 问 ”。 此 时 的 页 面 效果 如 图 7-37 所 示 。 


图 7-37 网 页 效果 
06 将 前 面 章节 中 已 制作 的 导航 条 插入 第 一 行 第 一 列 的 单元 格 中 。 打开 CSS 面板 ”， 


单 击 面 板 底 部 的 “附加 样式 表 ” 按钮 攀 | 将 前 面 草 节 中 已 定义 的 样式 表 文 件 imgborder.css 
链接 到 当前 文件 中 。 效 果 如 图 7-38 所 示 。 


-如果 不 链 接 外 部 样式 表 文 件 imgborder.css， 则 预览 页 面 时 可 以 看 到 ， 添 加 
了 超级 链接 的 图 片 显示 有 蓝 色 边框 


07 9 将 光标 定位 在 第 二 行 第 二 列 的 蛙 元 格 中 ， 在 属性 面板 上 设 秆 单元 格 内 容 水 平 司 
中 对 齐 ， 重 直 顶 端 对 齐 。 单 击 “ 常 用 ”面板 上 的 表格 按钮 园 ， 在 打开 的 “表格 ”对 话 框 中 
设置 表格 的 行 数 为 4， 列 数 为 1， 表 格 宽 度 为 98%， 边 框 为 0。 单 击 “ 确 定 ” 按 钮 插入 一 个 4 
行 1 列 的 表格 。 

08 将 光标 定位 在 第 一 行 的 单元 格 中 ， 在 其 属性 面板 上 ， 将 单元 格 内 容 的 水 平 对 章 


| 

| 

时 提 示 : 

| EL CE 王 1 大 
| 

1 

1 
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方式 设置 为 “居中 对 齐 ”。 一 

09]】 单 击 属性 面板 上 的 [本 亚 按钮 ， 然 后 在 “目标 规则 ”下 拉 列 表 中 选择 “新 CSS 
规则 ”， 然 后 单 击 “ 编 辑 规则 ”按钮 打开 规则 定义 对 话 框 。 

10] 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “标签 ”， 在 “选择 器 名 称 ”中 选择 h1， 在 
“规则 定义 ”下 拉 列 表 中 选择 “ 仅 限 该 文档 ”， 然 后 单 击 “确定 ”按钮 打开 对 应 的 规则 定 
义 对 话 框 。 

11 在 对 话 框 左 侧 的 分 类 列表 中 选择 “类 型 ”， 然 后 在 “字体 ”下 拉 列 表 中 选择 “ 编 
名 字 体 列表 ”, 在 弹出 的 “编辑 字体 列表 ”对 话 框 右 下 角 的 “可 用 字体 ”列表 框 中 选择 “ 方 
正 粗 倩 简体 ”。 然 后 单 击 图 按 钮 将 其 添加 到 字体 列表 中 ， 并 单 击 “ 确 定 ”按钮 关闭 对 话 框 。 


| 让 二 jz 


图 7-38 ”插入 导航 条 的 效果 


12 在 规则 定义 对 话 框 的 “字体 ”下 拉 列 表 中 选择 “方正 粗 倩 简体 ”， 在 “字号 ” 
F 拉 列表 中 选择 “xx-large”， 然 后 单 击 颜色 井 右 下 角 的 下 拉 箭 头 ， 在 弹出 的 颜色 面板 中 移 
择 #999。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 四 
13] 在 第 一 行 单元 格 中 输入 文本 “欢迎 光临 我 的 小 屋 ”。 在 属性 面板 上 单 击 [am 接 
钮 ， 在 “格式 ”下 拉 列表 中 选择 “标题 1”， 即 可 将 上 一 步 定义 的 样式 表 应 用 到 文本 。 
14] 将 光标 放置 在 输入 的 文本 后 ， 然 后 按 下 Shift + Enter 组 合 键 插入 一 个 软 回 车 。 
1 单 击 “ 常 用 ”面板 上 的 图 像 图 标 按钮 ， 在 打开 的 对 话 框 中 选择 一 条 水 平分 制 线 ， 
单 击 “ 确 定 ”按钮 插入 图 像 。 在 属性 面板 上 设置 图 片 宽度 为 480 像 素 ， 效 果 如 图 7-39 所 示 。 


欢 四 光临 我 的 小 屋 


图 7-39 ”插入 文本 和 分 割 线 的 效 琳 
16 选中 第 二 行 的 单元 格 ， 单 击 “ 常 用 ”面板 上 的 图 像 图 标 按钮 ， 在 打开 的 对 话 框 
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居间 Dreamwenyer C356 中 文 版 入 门 与 粮 高 实例 球形 
和 — 


中 选择 己 在 国 像 编程 光 什 中 十 和 首 轩 六 果 如 0 
i 


17 将 光标 定位 在 第 三 行 的 单元 格 中 ， 单 击 “ 常 用 ”面板 上 的 图 像 图 标 控 钮 ， 在 打 
开 的 对 话 框 中 选择 已 制作 好 的 水 平分 制图 记 ， 单 击 “ 确 定 ” 按 钮 插入 图 像 。 

18 在 第 四 行 的 单元 格 中 输入 文本 ， 并 新 建 一 个 CSS 规 则 设置 文本 颜色 为 妇 33。 然 
后 选中 文本 ， 双 击 “CSS 样 式 ” 和 面板 中 “所 选 内 容 的 摘要 ”列表 中 的 属性 值 。 打 开 “CSS 
规则 定义 ”对 话 框 。 

19 贞 在 “分 类 ”中 选择 “区 块 ”， 并 在 “文本 对 齐 ” 下 拉 列 表 中 选择 “居中 ” 
后 单 击 “应 用 ” 鬼 钮 应 用 样式 ， 单 击 “ 硝 定 ” 投 钮 关闭 对 话 框 。 


欢迎 光临 我 的 小 ee ~ 
eh 和 


图 7-40 ”插入 图 片 的 效果 


20 单 击 文档 窗口 项 部 的 “代码 ”按钮 ， 切 换 到 代码 视图 ， 在 选中 的 代码 之 前 诬 加 
以 下 代码 : 


<marquee behavior="scroll” directon= up” hspace="0" height="220" vspace="10" 


loop="-1" scrollamount="1" scrolldelay="60"> 


如 图 7-41 所 示 。 
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图 7-41 添加 代码 
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21， 在 选中 的 代码 末尾 加 上 </marquiee>。 然 后 单 击 “设计 一 切换 到 “设计 ”视图 。 
22 保存 文档 ， 并 按 F12 键 在 浏览 需 中 预览 效果 ， 如 图 7-42 所 示 。 


刚刚 交 无 音 史 起 
花 名 项 着 网 藻 地 
我 看 见 凶 和 美的 一 场 导 花 古 


图 7-42 ”主页 正文 区 域 预 多 效 果 
正文 区 域 底部 的 文本 癌 上 循环 移动 ， 形 成 跑马 灯 效 果 。 


7.6 创建 AP 元 素 


AP 元 素 在 很 多 的 绘图 软件 和 图 像 软件 中 都 有 相应 的 定义 ， 同 样 在 Dreamweaver 中 也 有 
自己 相应 的 定义 ， 只 不 过 Dreamweaver 将 其 进行 了 可 视 化 操作 。 利 用 Dreamweaver， 用 户 可 
以 在 不 进行 任何 JavaScript 或 HTML 编 码 的 情况 下 控制 AP 元 素 是 显示 还 是 隐藏 :配合 行为 的 
使 用 ， 还 可 轻松 制作 出 动态 效果 。 此 外 ，AP 元 素 还 可 以 和 表格 互相 转换 ， 将 AP 元 素 和 表格 
综合 利用 起 来 ， 可 以 更 好 地 实现 图 文 混 排 。 

人 简 而 言 之 ，Dreamweaver CS6 中 的 AP 元 素 有 如 下 优点 : 

1. 能 够 精确 定位 ”在 页 面 中 插入 一 个 AP 元 素 之 后 ， 可 以 很 方便 地 在 属性 设置 面板 中 指 
定 它 的 大 小 及 在 页 面 中 的 绝对 坐标 ， 并 且 AP 元 素 与 AP 元 素 之 间 的 定位 也 相当 精确 ， 几 乎 
可 以 不 通过 属性 栏 ， 直 接 用 眼 观 看 就 可 以 了 。 

2. 插入 自如 ”在 页 面 的 某 处 插入 一 段 文本 或 一 幅 图 片 ， 如 果 用 表格 来 实现 ， 可 能 会 
将 表格 拆 分 得 乱 七 八 炎 ， 最 后 还 可 能 因 定 位 不 好 ， 在 浏览 器 中 预 归 不 尽 如 人 意 。 如 末 用 AP 
元 素 了 驶 方便 多 了 ， 随 便 男 一 个 AP 元 素 ， 可 以 插入 任何 网 页 对 象 ， 然 后 拖 到 合适 的 地 方 ， 绝 
对 精确 ! 

3. 加 速 浏 览 ” 这 一 点 是 相对 表格 而 言 的 。 本 章 开 头 提 到 ， 在 下 浏览 夯 中 、 XX 
有 完全 被 下 载 完 之 后 ， 才 能 显示 其 内 容 ， 如 果 这 个 表格 很 大 ， 或 艇 套 的 层次 比较 复杂 ， 
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往 会 让 浏览 者 长 时 间 等 待 。 运用 AP 元 素 制 作 的 网 页 可 以 进行 像素 级 的 定位 ， 并且 使 用 不 同 
版 本 的 浏览 器 浏览 网 页 内 容 时 也 不 会 出 现 上 述 的 问题 。 

4. 可 闭 加 ”表格 是 不 能 重 若 的， 而 AP 元 素 可 以 重 牙 。 利 用 这 一 特性 ， 可 以 达到 各 种 
微妙 的 效果 。 例 如 ， 可 以 在 一 个 AP 元 素 中 放置 背景 图 像 ， 然 后 在 该 AP 元 素 的 前 面 放 置 第 二 
个 AP 元 素 ， 它 包含 带 有 透明 背景 的 文本 ， 这 样 就 可 以 制作 AP 元 素 渐 入 和 渐 出 的 动画 。 

在 Dreamweaver 中 可 以 使 用 插入 、 拖 动 等 多 种 方法 创建 AP 元 素 和 租 套 AP 元 素 。 所 谓 般 
套 AP 元 素 ， 就 是 在 一 个 AP 元 素 中 的 AP 元 素 ， 典 套 的 AP 元 素 随 着 父 AP 元 素 移动 并 且 继承 
父 AP 元 素 的 可 见 性 。 下 面 通 过 一 个 简单 实例 演示 在 文档 中 创建 AP 元 素 和 内 套 AP 元 素 的 具 
体 步 骤 。 

01 新 建 一 个 HTML 文 档 。 设 置 好 页 面 属性 后 ， 单 击 “ 插 入 ”面板 上 的 “布局 ” 标 
签 ， 切 换 到 “布局 ”面板 。 

02 单 击 “ 布 局 ”面板 中 的 “绘制 AP Div” 图 标 盟 ， 此 时 鼠标 将 会 变 成 十 形状 。 

03 在 文档 窗口 中 需要 插入 AP 元 素 的 位 置 ， 按 下 鼠标 左 键 拖 出 一 个 矩形 AP 元 素 。 如 
图 7-43 所 示 。 

用 户 也 可 以 将 光标 放置 在 文档 窗口 中 需要 插入 AP 元 素 的 位 置 , 然后 执行 “插入 ”/“ 布 
局 对 象 ”/“AP Div” 来 早 命 令 ， 插 入 一 个 默认 大 小 的 AP 元 又 。 


一 提示 :如 果 需 要 绘制 多 个 AP 元 素 ， 在 单 击 “ 绘 制 AP Div” 图 标 之 后 ， 按 住 Cul 


04 朋 绘制 嵌 套 AP 元 素 ， 有 三 种 方法 。 

人 @ 在 “首选 参数 ”对 话 框 中 启用 AP 元 素 媒 套 功能 ， 并 确保 “AP 元 素 ” 面 板 上 的 “ 防 
止 重 骆 ” 复 选 框 没有 选中 ,然后 将 光标 放置 在 已 绘制 的 AP 元 素 内 部 ， 用 本 例 前 三 个 步骤 的 
方法 绘制 一 个 AP 元 素 ， 新 绘制 的 AP 元 素 将 自动 嵌 套 在 先 创建 的 AP 元 素 中 。 

默认 情况 下 ， 在 “首选 参数 ”对 话 框 中 禁用 了 AP 元 素 舱 套 功能 ， 可 以 采用 接 下 来 的 第 
二 种 方式 。 

四 在 绘制 子 AP 元 素 的 同时 ， 按 下 键盘 上 的 Alt 键 。 

先 创 建 的 AP 元 素 成 为 父 AP 元 素 ， 在 父 AP 元素 内 创建 的 AP 元 素 成 为 子 AP 元 素 ， 如 图 


7-44 上 所 示 。 
般 套 的 AP 元 对 


图 7-43 ”绘制 的 AP 元 素 图 7-44 ” 航 套 的 AP 元 素 
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此 外 ， 有 用户 还 可 以 将 多 个 已 存在 的 AP 元 系 变 为 能 釜 AP 元 素 。 

名 执行“ 窗口”/“AP 元 素 ” 菜 单 命 令 ， 调 出 “AP 元 素 ” 管 理 面板 。 然 后 在 AP 元 素 列 
表 中 选中 将 作为 子 元 素 的 AP 元 素 ， 按 住 Ctl 键 将 该 AP 元 系 拖 动 到 父 AP 元 素 上 ， 释 放 鼠 标 
即 可 ， 如 图 7-45 所 示 。 

在 “AP 元 素 ” 管 理 面 板 中 可 以 看 出 apDiv2 是 apDiv1 的 子 元 素 ，apDiv3 是 apDiv2 的 子 元 
素 ， 如 图 7-46 所 示 。 


到 | 人 元 未 二 
门 防止 重 委 全 ) 


[| apDivl 
EB apDiv2 
L apliv3 


图 7-45 ”将 apDiv3 拖 至 apDiv2 上 图 7-46 ”各 套 AP 元 素 在 绾 理 面 板 的 显示 


与 Dreamweaver 中 的 其 他 对 象 一 样 ， 在 设计 视图 中 选中 了 一 个 AP 元 素 后 ， 即 可 在 属性 
面板 上 修改 AP 元 素 的 外 观 ， 如 图 7-47 所 示 。 


加 SS-? 元 素 左 民 )| 368px| 宽 邮 ) | 164px 2 昔 台 ) 1 背景 图 像 虑 ) 类 [ey 元 v® 
= japDivi jw| 上 ry)| 381px| 高 吕 | 5S2px| 可见 性 [default [x| 背景 颜色 ) [| 
道 出 | v| 部 缉 : 去 右 


上 EE 


图 7-47 ”AP 元 素 属性 设置 面板 


该 面板 中 各 个 属性 的 作用 简要 介绍 如 下 : 

“CSS-P 元 素 ”: 用 于 设置 AP 元 素 的 名 学 ， 名 字 只 能 使 用 瑞 文 字母 及 数字 ， 且 只 能 使 用 
字母 开头 。 

“ 左 ” 和 “上 ”: 用 于 指定 AP 元 系 的 左边 框 (和 顶部 ) 相对 于 页 面 或 父 AP 元 素 的 位 置 。 

“ 宽 ” 和 “高 ”: 分 别 用 于 指定 AP 元 素 的 宽度 和 融 度 。 

“7 轴 ”: 用 于 指定 AP 元 素 的 乙 编号 〈 或 扒 登 顺序 号 ) 。 

Z 轴 编号 较 大 的 AP 元 素 出 现在 编号 较 小 的 AP 元 素 的 上 面 。 编 号 可 以 为 正 数 ， 可 以 为 负 
数 ， 也 可 以 是 0。 如 果 AP 元 素 不 重 登 ， 则 访 值 没有 实际 用 途 ， 可 以 在 AP 元 素 管 理 面 板 中 修 
改 AP 元 素 的 序列 值 。 

“可 见 性 ”: 用 于 控制 AP 元 素 的 初始 显示 状态 。 可 使 用 脚本 语言 〈 如 JavaScript) 控制 
AP 元 系 的 可 见 性 和 动态 显示 AP 元 系 的 内 容 。 

该 属性 有 4 个 选项 ， 其 中 “Default” 表 示 不 指定 AP 元 素 的 可 见 性 属性 ， 但 多 数 浏 览 震 
把 该 项 默认 为 “Inherit”〔( 继 承 ); “Inherit” 表 示 继 承 父 AP 元 素 的 可 见 性 属性 ; “Visible” 
表示 显示 AP 元 素 的 内 容 ， 忽 略 父 AP 元 素 是 否 可 见 : “Hidden” 表 示 隐 藏 AP 元 素 的 内 容 ， 
忽略 父 AP 元 素 是 个 可 见 。 

“背景 网 像 ” 和 “背景 颜色 ”: 分 别 用 于 设置 AP 元 素 的 背景 图 像 。 
“类 ”: 用 于 设置 AP 元 系 中 的 内 容 所 使 用 的 CSS 样式 。 
“ 洲 出 ”: 用 于 设置 AP 元 系 的 内 容 超 过 了 它 的 大 小 以 何 种 方式 进行 显示 。 
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该 选项 仅 适用 于 CSS AP 元 素 。 有 以 下 4 个 选项 : 
(1) Visible: 表示 增加 AP 元 素 的 大 小 ，AP 元 素 问 下 或 向 右 扩 大 ， 以 便 AP 元 素 的 所 有 


内 容 都 可 见 ; 
(2) Hidden: 表示 保持 AP 元 素 的 大 小 ， 并 剪 切 抒 超 出 AP 元 素 范 围 的 任何 内 容 ， 不 显 
示 深 动 条 ; 


(3) Scroll: 表示 给 AP 元 素 添 加 滚动 条 ， 不 管内 容 是 否 超过 了 AP 元 素 的 大 小 ， 特 别 
是 通过 提供 滚动 条 来 避免 在 动态 环境 中 显示 和 不 显示 滚动 条 导致 的 混乱 ; 
(4) Default: 表示 在 AP 元 素 的 内 容 超 过 它 的 边界 时 目 动 显示 滚动 条 。 


\ 注意 : 
Cy 如 果 AP 元素 的 内 容 超过 指定 大 小 , AP 元 素 的 底 边 缘 会 延伸 以 容纳 这 些 内 


容 . 当 AP 元 素 在 浏览 器 中 出 现时 ,如 果 AP 元 素 的 “溢出 ”属性 没有 设置 为 “visible”， 
那么 底 边缘 将 不 会 延 仲 ， 超 出 的 那 部 分 内 容 将 自动 被 剪 切 掉 。 


“ 酸 辑 ”: 用 于 设置 AP 元 素 的 可 见 区 域 ， 指 定 左 侧 、 顶 部 、 右 侧 和 乓 边 坐 标 可 在 AP 元 
素 的 坐标 空间 中 定义 一 个 矩形 〈 从 AP 元 素 的 左上 角 开 始 计算 ) 。 

AP 元 系 绎 过 “ 甬 辑 ”后 ， 上 只 有 指定 的 定形 区 域 才 是 可 匈 的 。 这 上 坚信 都 是 相对 于 AP 元 
素 本 映 ， 不 是 相对 于 文档 窗口 或 其 他 对 象 。 


7.7 ”AP 元 素 常 用 操作 


在 Dreamweaver 某 个 页 面 中 创建 的 所 有 AP 元 素 都 显示 在 “AP 元 素 ” 面 板 中 ， 这 为 
用 户 提 供 了 一 种 对 网 页 的 对 象 进行 有 效 控制 的 手段 。 

执行 “窗口 ”/“AP 元 素 ” 菜 单 命 令 ， 即 可 以 打开 AP 元 素 管 理 面 板 〈 见 网 7-47) 。 

AP 元 素 显 示 为 按 Z 轴 顺序 排列 的 名 称 列表 。 辱 创建 AP 元 素 时 使 用 AP 元 素 的 默认 属性 ， 
则 首先 创建 的 AP 元 素 出 现在 列表 的 奔 部 ， 最 后 创建 的 AP 元 素 出 现在 列表 的 项 部 。 岗 套 的 
AP 元 系 显 未 为 连接 到 父 AP 元 素 的 名 称 。 

默认 情况 下 ，AP 元 系 可 以 重 登 。 如 果 在 AP 元 素 管 理 面 板 中 选择 了 “防止 重 登 ” 复 选 框 ， 
则 绘制 、 拖 动 AP 元 素 时 无 法 使 AP 元 素 重 登 。 如 果 是 在 创建 AP 元 素 之 后 才 选 中 此 选项 ， 则 
\ 影 啊 已 重 登 的 AP 元 素 。 

此 外 需要 注意 的 是 ， 即 使 选择 了 “防止 重 登 ” 复 选 三， 有 些 操作 也 可 能 导致 两 个 AP 
元 素 重 登 。 例 如 ， 使 用 识 单 插入 AP 元 素 ， 修 改 AP 元 素 的 边 距 ， 都 有 可 能 导致 AP 元 素 重 例 
加 或 肉 依 ， 此 时 需要 在 文档 窗口 中 拖 动 重 登 的 AP 元 素 ， 使 它们 分 离 。 

使 用 “AP 元 素 ” 和 面板 还 可 以 更 改 AP 元 素 的 可 见 性 ， 网 人 套 或 堆 羞 AP 元 素 ， 以 及 选择 一 
个 或 多 个 AP 元 素 等 。 下 面 分别 进 行 说 明 。 


7.7.1 激活 、 选 择 AP 元 素 


如 采 需 要 在 AP 元 素 中 插入 对 象 ， 必 须 先 激活 AP 元 素 。 将 鼠标 在 AP 元 聂 内 的 任何 地 方 
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单 击 ， 即 可 激活 AP 元 系 。 此 时 ， 插 入 点 位 于 AP 元 素 请 。 补 泊 活 AP 元 对 的 边界 突出 显示 ， 
于 也 同时 显示 出 来 ， 如 图 7-48 所 示 。 


| 提示 激活 AP 元 素 的 操作 不 等 于 选择 AP 元 素 . 


如 果 要 对 AP 元 素 进 行 移动 、 调 整 大 小 每 操作 ， 必 须 先 选 中 AP 元 素 。 这 择 AP 元 素 可 以 
分 为 选择 一 个 AP 元 素 和 选择 多 个 AP 元 系 ， 它 们 的 操作 不 尽 相 同 ， 下 面 分 别 进 行 介 

1. 选择 一 个 AP 元 系 ”要 选择 一 个 AP 元 么 可 使 用 如 下 方法 之 一 : 

(1) 在 “AP 元素 ”面板 中 单 击 该 AP 元 素 的 名 称 。 


(2) 单 击 一 个 AP 元 素 的 选择 柄 已。 如 果 “ 选 择 柄 ”不 可 见 ， 可 在 该 AP 元 素 中 的 任意 


位 置 单 击 以 显示 该 选项 柄 。 

(3) 单 击 一 个 AP 元 素 的 边框 。 

(4) 在 设计 视图 底部 早 击 AP se ， 它 表示 AP HTML 代码 中 的 位 置 。 如 
果 AP 元 系 代 但 标记 不 可 见 ， 执 行 “ 奏 看 ”/“ 可 视 化 且 理 ”/“ 不 可 见 元 辽 ” 命 令 。 

选中 后 的 AP 元 素 边 框 上 会 出 现实 心 的 0 站 7-49 所 示 。 

2. 选择 多 个 AP 元 素 ”有 时 需要 对 多 个 AP 元 素 进行 操作 , 比如 使 多 个 AP 元 素 顶 部 对 章 ， 
ee J 宽度 和 高 度 相 同 ， 残 需要 选择 多 个 AP 元 素 。 如 条 要 选择 多 个 AP 元 素 ， 可 执行 

(1) 先 在 文档 窗 口中 选择 一 个 AP 元 素 ， 然 后 按 住 Shift 键 ， 再 用 鼠标 单 击 其 他 AP 元 素 
的 边框 ， 则 可 以 同时 选择 多 个 AP 元 系 。 

(2) 调 出 AP 元 系 管 理 面板 ， 先 用 鼠标 选择 一 个 AP 元 素 的 名 字 ， 然 后 按 住 Shift 键 ， 再 
用 鼠标 单 击 其 他 AP 元 素 的 名 字 ， 则 也 可 以 同时 选择 多 个 AP 元 素 。 

当 多 个 AP 元 素 被 选择 时 ， 最 后 选择 的 AP 元 素 的 手柄 以 实心 突出 显示 ， 其 他 AP 元 素 的 
手柄 以 罕 心 显示 ， 如 图 7-50 所 示 。 

eee 的 AP 元 素 


mele 


图 7-48 ”激活 的 AP 元 妹 图 7-49 选中 的 AP 元 素 图 7-50 选中 的 多 个 AP 元 素 


7.7.2 移动 、 对齐、 复制 AP 元 素 


在 使 用 AP 元 又 布局 页 面 时 ， 御 需要 移动 和 对 齐 AP 元 了 系 。 下 面 简 要 介绍 这 些 操作 。 
(1) 大 要 在 文档 窗口 中 移动 一 个 AP 元 素 ， 可 执行 以 下 操作 之 一 : 
(2) 先 选择 一 个 AP 元 素 , 然后 在 该 AP 元 素 的 选择 手柄 加 上 按 不 鼠标 左 键 并 拖 动 鼠标 ， 
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即 可 移动 AP 元 素 。 也 可 以 选 申 AP 元 系 之 后 ， 按 键 玫 上 的 方 品 键 一 个 一 个 像素 地 移动 AP 元 
系 。 


(3) 将 鼠标 指针 移动 到 需要 移动 的 AP 元 素 的 边框 上 , 档 鼠 标 指 针 形 状 变 为 四 个 第 头 时 ， 
按 住 也 标 左 键 拖 动 有限 标 ， 即 可 以 移动 AP 元 素 。 
在 设计 视图 选中 要 移动 的 AP 元 聚 ， 然 后 在 属性 设置 面板 中 设 苞 其 “ 左 ”、“ 上 ”属性 的 


2 提示 “如 果 选 择 了 多 个 AP 元 素 , 在 任 一 个 被 选择 的 AP 元 素 的 手柄 上 按 下 鼠标 左 | 


键 并 拖 动 ， 可 移动 所 有 选中 的 AP 元 素 。 如 果 使 用 了 训 套 AP 元 素 ， 则 没有 选择 的 子 


齐 下 缘 ” 等 对 齐 命令 ， 可 以 按 指 定 方 式 对 齐 选 中 的 多 个 AP 元 素 。 
命令 后 的 效果 如 图 7-51 右 图 所 示 。 


图 7-51 ”AP 元 素 顶 对 齐 前 后 的 效果 


在 文档 窗口 中 ， 使 用 网 格 也 可 以 精确 定位 AP 元 素 。 如 果 启 用 了 网 格 的 吸附 功能 ， 则 在 
移动 AP 元 妹 时 ，AP 元 又 日 动 与 最 近 的 网 格 线 对 齐 。 如 宋 选 择 了 “防止 重 登 ” 复 选 枉 ， 且 
吸附 功能 可 能 导致 两 个 AP 元 又 重 登 ， 则 AP 元 素 不 是 被 吸附 到 网 格 ， 而 是 被 吸附 到 最 靠 ; 
的 AP 元 素 的 边缘 。 在 制作 厂 面 相似 的 页 面 时 通过 复制 已 制作 好 的 AP 元 素 可 简化 制作 过 程 。 

选择 要 复制 的 AP 元 素 ， 执 行 “ 编 辑 ”/“ 揽 贝 ”命令 。 然 后 取消 被 选择 的 AP 元 素 ， 并 
执行 “编辑 ”/“ 烙 贴 ”命令 ， 即 可 完成 操作 。 


| 注意 : 
a 复制 AP 元素 时 ，AP 元 素 内 所 有 的 对 象 也 一 起 被 复制 ， 且 被 复制 的 AP 元 


素 会 与 原来 的 AP 元 素 重 登 ， 需 要 通过 移动 操作 将 它们 分 离 。 


7.7.3 调整 AP 元 素 的 尺寸 


在 文档 窗口 中 对 AP 元 系 进 行 操作 时 ， 常 党 需要 调整 AP 元 了 系 的 大 小 。 在 Dreamweaver 
中 ， 可 以 通过 拖 动 调整 单个 AP 元 素 的 大 小 ， 也 可 以 采 单 命令 同时 调整 多 个 AP 元 素 的 大 小 
以 使 其 具有 相同 的 宽度 和 高 度 。 

手工 拖 动 调整 AP 元 素 的 大 小 比较 方便 。 选 中 AP 元 素 后 ， 将 鼠标 指针 移动 到 AP 元 系 边 
框 上 的 监 色 实 心 手柄 上 , 当 鼠 标 指针 变 为 牌 直 或 水 平 双 回 租 头 时 , 按 住 鼠 标 左 键 拖 动 鼠标 ， 
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可 以 调整 AP 元 素 的 高 度 或 宽度 ; 当 鼠 标 指 导 变 为 料 同 用 新 关 醒 ， 按 住 鼠 标 左 键 斜 同上 或 斜 
回 下 拖拉 鼠标 ， 则 可 以 同时 调 骆 AP 元 素 玖 训 高 度 及 宽度 。 这 种 方式 比较 难以 准确 地 确定 AP 
元 素 的 大 小 。 

在 AP 元 素 的 属性 设置 面板 中 直接 设置 属性 宽 和 高 的 具体 数值 ， 可 以 比较 精确 地 确定 
AP 元 素 的 大 小 。 

如 果 要 同时 调整 多 个 AP 元 素 的 大 小 ， 使 其 其 有 相同 的 党 度 和 高 上 度 ， 可 以 选中 多 个 AP 
元 素 ， 之 后 执行 “修改 ”/“ 排 列 顺序 ”/“ 设 成 宽度 相同 ”或 “ 设 成 高 度 相 同 ” 沫 单 命 令 。 
该 操作 可 将 所 有 选 定 的 AP 元 素 调 整 为 最 后 一 个 选 定 的 AP 元 素 〈 手 柄 以 监 色 实 心 突 出 显 
示 ) 的 宽度 或 高 度 。 

用 户 也 可 以 在 选 定 多 个 AP 元 素 之 后 , 在 属性 面板 中 输入 宽度 和 高 度 值 ， 这些 值 将 被 应 
用 于 所 有 选 定 的 AP 元 素 。 


= 提示 : 选择 AP 元 素 后 ， 在 想 要 扩展 的 方向 上 同时 按 下 键盘 上 的 Ctrl 键 和 箭头 键 ， 
可 以 一 次 一 个 像素 地 调整 AP 元素 的 大 小 ， 


7.7.4 设置 AP 元 素 的 堆 又 顺序 


AP 元 素 的 运用 使 设计 者 在 处 理 图 像 时 能 够 在 很 多 个 界面 上 进行 , 从 而 大 大 提高 了 设计 

者 的 工作 效率 ， 可 以 设计 出 效果 更 丰富 的 网 页 。 此 外 ，AP 元 素 体 现 了 网 页 技术 从 一 个 二 维 
空间 问 三 维 空间 的 一 种 延伸 ， 即 AP 元 素 Z 轴 的 概念 ， 也 就 是 AP 元 素 的 堆 墅 顺序。 改变 AP 
元 到 的 堆 告 顺序， 可 以 改变 AP 元 素 的 显示 效果 。 改 变 AP 元 素 的 堆 著 顺序 的 两 种 操作 方法 。 

01 新 建 一 个 文档 ， 单 击 “ 插 入 ”/“ 布 局 ”面板 中 的 “绘制 AP Div” 图 标 是 ， 在 文 
档 设 计 视 图 中 插入 一 个 AP 元 系 。 

02 和 光标 定位 在 AP 元 素 内 ， 单 击 “ 插 入 ” 栏 “ 常 用 ”面板 中 的 插入 图 像 的 图 标 图 ， 
在 AP 元 条 里 插入 一 张 图 像 。 

03 9 按 同 样 方 法 再 创建 两 个 AP 元 素 ， 并 在 AP 元 素 中 插入 图 像 。 此 时 的 页 面 效 果 如 图 
7-S2 上 所 示 。 


0 Le| 
Sbody> [RR 名 lo0% vv|857x373v 26K74 秒 


图 7-52 页面 效果 
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: é 本 DreamWeaveriC56 中 文 腑 入 门 与 提高 实例 者 带 


04 用 打开 AP 元 素 管理 面板 ， 选 种 需 要 调整 堆 匡 顺序 的 AP 元 素 apDiv1， 将 apDivI 的 Z 
列 值 变 为 4。 此 时 的 AP 元 素 管理 面板 如 图 7-53 所 示 。 此 时 的 页 面 效 末 如 图 7-54 所 示 。 


吊 


apDiv3 


图 7-53 ”修改 apDiv1 的 Z 列 值 图 7-54 ”修改 apDiv2 的 Z 列 值 
A en ey on eg og oy Ry og eg 


5 


| 


OOo” 


-apDivi- 据 >= 


1 " 


Sbody> RQ hoo% v657 x 373v 26 KA4 黎 


图 7-55 页面 效果 


《0 5 在 AP 元 素 管理 面板 中 选中 apDiv2， 单 击 Z 列 ， 输 入 一 个 比 apDiv3 的 堆 登 顺序 号 大 
的 数值 ， 本 例 输 入 5，apDiv2 在 堆 各 顺序 中 往 上 移动 ， 停 留 在 apDiv1 之 上 。 如 图 7-55 所 示 。 
如 果 输 入 一 个 较 小 的 数字 ， 则 AP 元 素 在 堆 关 顺序 中 往 下 移动 。 


y 注意 : 
性 网 页 的 乙 列 值 为 0。 如果 某 AP 元 率 的 乙 列 值 为 负 值 ， 表 示 该 AP 元 素 在 
网 页 之 下 ， 网 页 的 内 容 可 能 会 履 盖 该 AP 元 素 所 包含 的 内 容 。 


〖06) 在 页 面 中 拖 动 apDiv1 和 apDiv2 到 合适 的 位 置 ， 然 后 保存 文档 ， 按 F12 键 在 浏览 串 
中 预览 ， 效 果 如 图 7-56 所 示 。 


图 7-56 ”实例 效果 
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7.7.5 显示 、 人 隐藏 AP 元 素 


在 Dreamweaver 中 ， 通 过 AP 元 系 显 示 或 隐藏 网 页 中 的 茶 个 元 素 非 常 方便。 

在 AP 元 素 管理 面板 中 选择 需要 改变 可 见 性 的 AP 元 素 ， 单 击 对 应 的 眼睛 登 图 标 ， 即 
可 在 可 见 与 不 可 见 之 间 切 换 。 其 中 睁 开 的 眼睛 表示 AP 元 素 可 见 ; 闭 上 的 眼睛 表示 不 可 见 ; 
没有 眼睛 表示 继承 其 父 AP 元 到 的 可 见 性 。 如 果 没 有 父 AP 元 素 ， 则 继承 文档 主体 的 可 见 
性 ， 总 是 可 见 的 。 

如 果 要 同时 改变 所 有 AP 元 素 的 可 见 性 ， 直接 单 击 眼睛 列 最 上 端的 眼睛 图 标 即 可 ， 如 图 
7-57 所 未 。 


单 击 这 里 可 以 改 
变 AP 元 系 的 可 见 性 


图 7.57 “同时 改变 Ap 元素 的 可 见 性 
7.8 AP 元 素 与 表格 相互 转换 


与 表格 相 比 , 使 用 AP 元 素 可 以 更 方便 、 精 确 地 定位 页 面 元 素 。 所 以 在 网 页 制作 过 程 中 ， 
可 以 先 用 AP 元 素 快 速 创 建 复杂 的 页 面 布 局 ， 然 后 再 将 AP 元 素 布 局 转换 为 表格 布局 ， 以 供 
不 支持 AP 元 素 定 位 技术 的 一 些 早 期 浏览 器 浏览 。 同样, 一些 使 用 表格 布局 的 页 面 如 果 希 望 
利用 AP 元 素 的 灵活 性 ， 也 可 以 把 表格 转换 成 AP 元 素 。 

人 下面 通过 两 个 简单 实例 演示 AP 元 素 与 表格 相互 转换 的 方法 和 效果 。 

01 在 页 耐 上 绘制 多 个 不 重 营 的 AP 元 素 ， 并 编辑 内 容 ， 如 图 7-58 所 示 。 保 存 文档 。 

02 执行 “修改 ”/“ 转 换 ”/“ 将 AP Div 转 换 为 表格 ”命令 ， 弹 出 “将 AP Div 转 换 为 
表格 ”对 话 框 ， 如 图 7-59 所 示 。 


将 ap Divr 转换 为 表格 


i -| . 和 表格 布局 : @ 最 精确 0) 
又 是 一 个 飘 雪 的 池 节 be a ， 加 晤 小 : 合并 空白 单元 6) 
你 那里 下 要 了 吗 面 对 划 记 估 信 不 个 2 小 于 : |+ | 像素 宽度 


器 使 用 透明 GIFs (T) 
中 置 于 页 面 中 央 代 ) 


布局 工具 : [ 门 防 止 重 委 让 ) 
口 显示 Mr 元 素面 板 () 
口 显示 网 格 (6) 


于 洗 忆 乐 ，) | 品 ] 靠 齐 到 网 格 凶 ) 


图 7-58 ”AP 元 素 布 局 效果 图 7-59 “转换 AP 元 素 为 表格 ”对 话 框 
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[外 大 DreonieoverC6 中 文 队 入门 与 提高 实 创 者 大 


对 话 框 中 各 参数 的 功能 介绍 如 下 : 
“最 精确 ”: 为 每 一 个 AP 元 素 建 六 一 个 表格 单元 ， 同 时 AP 元 素 之 间 的 空 际 也 建立 相应 
的 单元 格 。 
“最 小 : 合并 空白 单元 ”: 当 AP 元 系 之 间 的 距离 小 于 设 定 的 值 时 ， 则 这 些 空 际 不 生成 独 
芯 的 单元 格 ， 它 们 被 合并 到 较 近 的 AP 元 素 生成 的 单元 格 中 。 
最 小 值 可 以 改变 ， 系 统 黑 认 最 小 值 为 4 个 像素 。 选 择 该 项 生成 的 表格 的 空 行 、 空 列 最 


少 。 


“使 用 透明 GIFs”: 生成 表格 的 最 后 一 行 用 透明 的 GIF 文件 格式 填充 ， 这 样 在 不 同 的 浏 
览 句 中 可 以 确保 表格 以 相同 的 列 宽 显 示 。 

“ 置 于 页 面 中 央 ”: 生成 的 表格 将 在 文档 窗口 中 居中 放置 。 

“防止 重 登 ”: 防止 AP 元 素 重 营 。 

“显示 AP 元 素面 板 ”: 转换 完成 后 显示 AP 元 素 管 理 面 板 。 

“显示 网 格 ”: 转换 完成 后 显示 网 格 。 

“ 靠 齐 到 网 格 ”: 局 用 吸附 到 网 格 功能 。 

03 骨 本 例 保留 默认 设置 。 单 击 “ 确 定 ” 按 钮 ， 即 可 将 AP 元 素 布 局 的 页 面 转换 为 表格 
布局 ， 效 果 如 图 7-60 所 示 。 

如 果 对 页 面 布局 不 满意 了 ， 就 需要 进行 调整 。 如 果 是 使 用 表格 布局 的 页 面 ， 调 整 时 没 
有 使 用 AP 元 素 布 局 的 页 面 灵 活 。 这 时 可 以 把 表格 布局 的 页 面 转换 为 AP 元 素 布局 的 页 面 ， 
再 进行 调整 。 

019 在 文档 窗口 中 制作 一 张 表格 ， 如 图 7-61 所 示 。 


pins k i re ow ] 
pe ee 


双 是 一 个 对 雪 的 了 Bi - 


:你 那里 下 雪 了 吗 ? 面 对 塞 冷 你 二 不 


a 


[TT 


图 7-60 AP 元 素 转换 为 表格 后 的 效果 图 7-61 每 转换 的 表格 


02 执行 “修改 ”/“ 转 换 ”/“ 将 表格 转换 为 AP Div” 命 令 ， 弹出 “将 表格 转换 为 AP 
Div” 对 话 框 ， 如 图 7-62 所 示 。 

该 对 话 框 中 的 各 个 选项 功能 与 “将 AP Div 转 换 为 表格 ”对 话 框 相同 ， 在 此 不 再 效 述 。 

03 本 例 使 用 默认 设置 。 单 击 “ 确 定 ” 按 钮 ， 即 可 将 表格 布局 转换 为 AP 元 素 布局 的 
页 面 。 效 果 如 图 7-63 所 示 。 


将 表格 转换 为 &P Div = i 天 一 一个 个 ~ 一 一 
木 区 东 入 下 
布局 工具 ; 回 防 止 重 要 (Pp) 二 
[J 显示 ap 元 素面 板 (A) | i 


MM 显示 网 格 (6) 


诗 文 奥 析 岁月 留 声 辣 林 漫步 
[VY 靠 齐 到 网 格 (5) 


图 7-62 “将 表格 转换 为 AP Div ”对话 杠 图 7-63 ”转换 为 AP Div 的 页 面 布 局 
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使 用 “将 表格 转换 为 AP Div ”命令 转换 表格 时 ， 位 于 表格 外 的 页 面 元 素 也 会 放 入 AP 
元 素 中 。 表 格 中 的 空 单元 格 不 会 转换 为 AP 元 素 ， 除 非 它 们 共有 痛 景 颜色 。 


已 在 模板 文档 或 基于 模板 创建 的 文档 中 ， 不 能 将 AP 元 素 和 表格 进行 相互 转 


换 。 如 果 确实 需要 转换 ， 应 在 将 文档 存 为 模板 之 前 进行 转换 
7.9 AP 元素 的 应 用 实例 


AP 元 素 在 网 页 设计 中 占有 十 分 重要 的 地 位 , 不 仅 可 以 精确 定位 网 页 元 素 , 还 可 以 配合 
表单 和 动作 制作 出 许多 经 典 的 特效 。 下 面 将 用 一 个 简单 实例 演示 AP 元 素 的 简单 特效 。 

上 网 时 常 遇 到 这 样 的 网 页 ， 在 页 面 上 只 显示 一 张 图 片 ， 当 用 户 把 女 标 移动 到 男 一 张 图 
片 或 文本 链接 上 时 ， 图 片 被 替换 ， 当 用 户 把 鼠标 从 图 片上 移 开 时 ， 再 次 显示 原来 的 图 片 。 
本 例 最 终 效果 如 图 7-64 所 示 。 

当 羽 标 移 动 到 右 侧 的 图 片上 时 ， 左 侧 的 图 片 被 隐藏 ， 显示 男 一 幅 图 片 ， 如 图 7-65 所 示 。 
鼠标 离开 图 片 时， 再 次 显示 原来 的 图 片 。 


将 鼠标 移 到 这 里 | 和 汪 


图 7-65 ”实例 效 朱 2 


本 例 的 具体 制作 步骤 如 下 : 
01 月 动 Dreamweaver CS6， 新 建 一 个 文档 ， 设 置 标 题 为 “ 流 金 岁月 ”并 保存 。 


149 


流 HlqvuT 薄 验 其/ 波 


3) "Dreamwearer 5 中立 县 入 门 与 得 高 实例 第 有 


02 单 击 “ 插 入 ”/“ 布 局 ”面板 中 的 “绘制 AP Div” 的 图 标明 ， 在 文档 设计 视图 中 
拖 动 女 标 绘制 一 个 AP 元 素 。 将 光标 定位 在 AP 元 素 中 ， 输 入 文字 “ 流 ”， 并 在 属性 面板 中 
调整 AP 元 素 大 小 、 位 置 ， 然 后 新 建 CSS 规 则 议 置 AP 元 素 的 背景 颜色 及 文本 格式 。 

031 9 按照 第 上 02 的 方法 再 插入 三 个 AP 元 素 ， 在 属性 面板 上 设置 不 同 的 颜色 ， 并 分 
别 输入 “ 金 ”、“ 岁 ”和 “月 ”。 

04 旭 在 AP 元 素 管 理 面 板 上 根据 需要 设置 四 个 AP 元 素 的 扒 县 顺 序 ， 并 进行 排列 。 完 成 
后 的 效果 如 图 7-66 所 示 。 

05 月 单 击 插入 AP 元 素 的 图 标 墅 ， 在 文档 设计 视图 中 再 插入 一 个 AP 元 素 ， 使 用 默认 名 
称 apDiv5 。 

06 将 光标 放置 在 AP 元 素 内 ， 单 击 插 入 图 像 的 图 标 输入 一 幅 图 像 ， 调 整 图 像 大 小 及 
位 置 ， 并 在 AP 元 素 管 理 面 板 中 ， 将 其 拖 到 最 底 妆 。 效 果 如 网 7-67 所 示 。 


图 7-66 ”AP 元 素 排列 效 末 1 图 7-67 ”AP 元 素 排列 效 末 2 


07 月 单 击 插入 AP 元 素 的 图 标 昌 ， 在 页 面 左 侧 再 插入 一 个 AP 元 素 apDiv6。 在 AP 元 素 
中 插入 一 幅 图 像 ， 二 滑 束 图 像 的 大 小 和 位 时 ， 如 图 168 所 示 ， 


图 7-68 ”页 面 效 来 


08 打开 AP 元 素 管 理 面 板 ， 单 击 AP 元 素 apDiv6 左 侧 的 眼睛 图 标 ， 使 之 团 眼 。 

09 朋 在 AP 元 系 apDiv6 所 在 的 位 置 绘制 一 个 与 apDiv6 大 小 一 致 的 AP 元 系 ， 使 用 默认 名 
称 apDiv7， 然 后 在 其 中 插入 一 幅 图 像 。 

10 打开 AP 元 素 管理 面板 ， 单 击 apDiv7 左 侧 的 眼睛 图 标 ， 使 之 闭 眼 ， 单 击 apDiv6 左 
便 的 眼睛 图 标 ， 使 其 可 见 。 

11 肯 用 忌 标 单 击 AP 元 素 apDivS$， 执 行 “ 窗 口 ”/“ 行 为 ”命令 ， 打 开行 为 面板 。 

12 骨 单 击 行为 面板 左边 的 加 号 〈+) 按钮 ， 从 弹出 的 下 拉 菜 单 中 执行 “显示 -隐藏 元 
素 ” 命 令 ， 弹 出 “显示 -隐藏 元 素 ” 对 话 框 。 

13 肯 在 对 话 框 中 的 元 素 列表 中 选择 AP 元 素 apDiv6， 然 后 单 击 “隐藏 ”按钮 ;选择 


apDiv7， 然 后 早 击 “显示 ”按钮 。 单 击 “ 人 确定 ”按钮 关闭 对 话 框 。 
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14 骨 单 击 事件 下 拉 列 表 按 钮 ， 从 璋 出 的 事件 列表 沈 单 中 选择 OnMouseOver。 

15 月 为 AP 元 系 apDiv5 添 加 第 二 个 “显示 - 隐 医 元 素 ” 行 为 。 在 “显示 - 隐 荐 元 素 ” 对 
话 框 中 选择 AP 元 素 apDiv7， 然 后 单 击 “ 隐 藏 ” 按 钮 ; 选择 apDiv6， 然 后 单 击 “ 显 示 ” 按 钮 。 
单 击 “ 确 定 ” 按 钮 关闭 对 话 框 后 ， 设 置 事件 为 OnMouseOut。 

16 你 存 文 档 ， 按 F12 键 了 预览 效果 。 


7.10 实例 制作 之 精确 定位 元 素 


上 一 章 中 已 经 基本 完成 了 主页 的 制作 ， 在 浏览 器 中 预览 时 会 发 现 ， 当 缩放 窗口 时 ， 使 
用 AP 元 素 定 位 的 导航 项 目 图 片 位 置 始终 保持 不 变 , 但 相对 于 整个 页 面 来 说 ,页 面 布局 束 变 
得 有 些 泥 乱 了 ， 如 图 7-69 所 示 。 

本 方 将 把 AP 元 素 布 局 的 导航 条 转换 为 表格 布局 ， 以 精确 布局 页 面 。 步 又 如 下 : 

01 9 按 住 Shift 键 选中 要 转换 为 表格 的 五 个 AP 元 素 。 

02 执行 “修改 ”/“ 转 换 ”/“ 将 AP Div 转 换 为 表格 ” 荣 单 命令 ， 打 开 “ 将 AP Div 
转换 为 表格 ”对 话 框 。 

03 在 “表格 布局 ”区 域 选择 “最 精确 ”， 且 取消 选中 “使 用 透明 GIFs”。 然 后 在 
“布局 工具 ”区 域 选中 “防止 重 登 ” 复 选 框 。 


道 听 认 说 


” 伊人 风尚 


图 7-69 页面 效果 


0499 单 击 “ 确 定 ” 控 钮 关闭 对 话 框 ， 并 将 选中 的 AP 元 取 转 换 为 表格 ， 如 图 7-70 所 示 。 

由 于 导航 图 片 的 背景 是 透明 的 ， 且 有 两 张 寻 航 图 厂 的 文本 闫 色 为 白色 ， 因 此 不 可 见 。 

05 选 中 转换 出 来 的 表格 ， 在 属性 面板 上 设置 其 党 硫 为 212 像 素 ， 然 后 将 其 插入 到 原 

来 导航 图 厂 所 在 的 持 元 格 中 ， 设 首 单 元 格 内 容 水 平 届 中 对 章 ， 和 垩 直 顶 曾 对 章 。 选 中 表格 第 

一 行 ， 将 其 删除 。 切 换 到 “布局 ”插入 面板 ， 将 光标 定位 在 表格 第 一 行 ， 单 击 “ 在 上 和 耐 插 
入 行 ” 按 钮 量 添 加 一 行 ， 并 在 属性 面板 上 设置 单元 格 高 度 为 30。 

06 调整 其 他 单元 格 的 宽度 和 高 度 ， 使 单元 格 中 的 导航 图 片 处 习 适 当 的 位 置 。 完 成 
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沸 引 dvVdrT 黄 订 媳 / 没 


é Dream 全 中文 版 入 门 与 得 高 实例 利 瑚 
a By a 
后 的 效果 如 图 7-71 所 示 。 


和 


oe 


图 7-70 ”转换 后 的 表格 图 7-71 表格 效果 
本 07 有 保存 文档 ， a 效果 如 图 7-72 所 示 。 
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TT oonlhest vs x 起 Dp: 
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到 哪 福 都 是 在 流 滚 


NINN CD"ARS 
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我 汗 见 多 么 美的 一 切 锣 花 雨 
国 一 曾 约 村 的 秀和 姑 
大 是 
Iaterant 人 发 1000 ~ 


图 7-72 页面 效 末 


此 时 无 论 怎 样 调整 窗口 的 大 小 ， 导 航 图 片 的 位 置 始 终 相 对 不 变 ， 从 而 保持 整个 页 面 布 
一 i 


| 一 提示 本 例 是 为 了 举例 说 明 AP 元 素 转化 为 表格 的 效果 ， 在 实际 应 用 中 ， 这 种 方 
式 经 常 与 预想 的 效果 有 出 入 ， 建 议 读者 不 要 采取 这 种 方式 创建 表格 定位 元 素 。 


ss。 


加 加“ 司 恬 加 加 必用 回国 大 加 
pe | ee 
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8.1 框架 概述 


什么 是 框架 呢 ? 框 染 是 网 页 中 特有 的 内 容 ， 在 编辑 网 页 的 窗口 中 ， 框 染 是 窗口 的 一 部 
分 。 它 将 一 个 Web 页 面 分 成 多 个 不 同 的 HTML 页 面 ， 其 中 每 一 个 HTML 页 面 都 是 独立 的 ， 
邦 具 有 初始 显示 的 URL 页 面 ， 虱 可 以 控制 框 染 的 布局 和 属性 。 在 打开 框架 中 的 某 一 个 超 链 
接 时 ， 只 在 目标 框架 中 显示 链接 的 内 容 ， 整 个 页 面 可 以 你 持 不 变 ， 从 而 使 用 户 能 够 一 次 浏 
号 更 多 的 内 容 ， 或 方便 用 户 在 文章 内 容 和 叶 航 内 容 之 间 进 行 切 换 。 换 句 话 说， 框架 可 以 将 
多 个 HTML 文 档 组 合 在 一 起 ， 共 同 显 示 在 一 个 屏 厅 上 。 在 浏览 占 中 ， 每 一 个 框架 都 是 独立 
的 浏览 紫 。 

框 染 由 两 个 主要 部 分 组 成 : 框 染 集 和 单个 框架 。 所 请 框 染 集 ， 残 古 定义 网 页 结构 与 属 
性 的 HTML 页面, 这 其 中 包含 了 显示 在 页 面 中 框架 的 数目 , 框架 的 尺寸 , 装 入 框 洪 的 页 面 
的 来 源 ， 以 及 其 他 一 些 可 定义 的 属性 的 相关 信息 。 框 染 集 页 和 面 不 会 在 浏览 絮 中 显示 ， 它 只 
用 于 存放 页 面 中 框架 如 何 显示 的 信息 。 单 个 框架 是 指 在 网 页 上 定义 的 一 个 区 域 。 

一 般 情况 下 ， 框 染 网 页 由 边框 、 深 动 条 和 其 中 显示 的 框 染 文件 组 成 。 下 和 面 我 们 人 简要 介 
绍 一 下 框 染 网 页 的 这 三 个 组 成 部 分 ， 便 于 读者 更 好 地 理解 本 革 的 内 容 。 

1. 边框 ”是 相 邻 框架 间 的 分 卫 线 。 边 框 线 有 两 个 属性 : 粗细 和 颜色 。 用 户 可 以 根据 
需要 调整 边框 的 粗细 和 闫 色 ， 以 增加 视觉 效果 。 

2. 深 动 条 ” 当 框 架 中 的 内 容 比较 多 ,不 能 一 屏 完全 显示 时 ， 束 需要 用 深 动 条 来 控制 深 
动 页 面 ， 以 便 显示 网 页 其 他 部 分 的 内 容 。 

3. 框架 文件 ”前面 提 到 过 ， 框 染 是 网 页 上 的 一 个 显示 区 域 ,每 个 框 染 都 可 以 不 受 页 面 
上 其 他 框架 的 影响 显示 一 个 独立 的 页 面 。 这 个 在 框架 内 打开 的 网 页 文件 即 为 框架 文件 。 

当然 ， 使 用 框 染 也 有 缺 点 。 例 如 ， 与 表格 相似 ， 可 能 难以 实现 不 同 框 染 中 网 页 元 取 的 
将 确定 位 ; 测试 导航 可 能 很 耗 时 间 ; 各 个 带 有 框架 的 页 面 的 URL 不 显示 在 浏览 右 中 ， 因 此 
访问 者 可 能 难以 将 特定 页 面 设 为 书签 。 

总 而 言 之 ， 使 用 框架 布局 页 面 可 以 方便 地 表现 出 页 面 的 层次 结构 ， 如 来 与 其 他 布局 工 
其 配合 使 用 ,扬长避短 ， 可 以 实现 复杂 、 精 美的 版 面 设计 。 


8.2 创建 框架 和 框架 集 


在 Dreamweaver CS6 中 创建 框架 有 两 种 方法 : 使 用 Dreamweaver 的 预 设 框架 ， 或 通过 拆 
分 操作 上 自 定 义 框 染 。 


8.2.1 使 用 预 置 框架 


选择 一 个 预 置 的 框架 将 和 目 动 地 建立 所 有 需要 的 框架 集 和 框架 来 创建 布局 ， 这 也 是 问 页 
面 牛 插入 框架 布局 的 最 简便 的 方法 。 

Dreamweaver CS6 为 谈 者 提供 了 13 种 预定 义 好 的 框 并 ， 可 以 让 读者 很 容易 地 从 中 选择 
想 要 创建 的 框 染 的 类 型 。 下 和 面 通过 渤 示 使 用 预 设 框架 创建 网 页 的 具体 步 又 。 
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01 新 建 一 个 HTML 页 面 ， 并 在 其 审 键 入 文本 
029 执行 “插入 ”/“HTMEL” /框架 ”有 沈 单 命令 一 弹出 “框架 类 型 ”下 拉 染 单 ， 如 
图 8-1 所 示 。 
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图 8-1 预 置 的 框架 类 型 


03 自 在 预 置 的 框架 类 型 中 单 击 需 要 的 框架 。 本 例 选 择 “ 上 方 及 左 侧 租 套 ”。 此 时 会 
弹出 “ 框 染 标 签 辅 助 功 能 属性 ”对 话 框 ， 提 示 用 户 为 每 一 个 框 染指 定 一 个 标题 。 
如 果 不 布 望 每 次 插入 框架 时 痢 弹 出 这 个 对 话 框 ， 可 以 在 “ 痛 选 参数 ”对 话 框 的 “辅助 
功能 ”分 类 中 取消 选择 “框架 ”。 
04 昌 本 例 保留 “框架 标签 辅助 功能 属性 ”对 话 框 中 的 默认 设置 。 单 击 “ 确 定 ” 按 钮 
关闭 对 话 框 ， 即 可 在 文档 窗口 的 设计 视图 中 插入 指定 的 框架 ， 如 图 8-2 所 示 。 


1- 
的 wntitlea-4 [XHTHL)* a 


这 里 的 内 容 是 插入 框 染 
之 前 页 面 上 已 有 的 内 容 
框架 由 两 个 主要 部 分 组 皮 


集 ， 就 是 定义 网 页 结构 与 属性 的 gf 这 其 中 包含 了 显 
示 在 页 面 中 框架 的 数目 ， 框 架 上 一 装 入 框架 的 页 面 的 来 源 

以 及 其 他 一 些 可 定义 的 属性 从 相关 信息 。 框架 集 页 面 不 会 在 
浏览 器 中 显示 ， ns 单 
个 框架 是 指 在 网 页 上 定义 的 一 个 区 


原文 档 内 容 


<body> <p> [NR] 池 Io0% v| 回 同 [| 456 x 204v 1K71I 秒 | 


图 8-2 ”插入 框 娘 后 的 效 琳 
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划 8 法 


浸 六 术 辜 了 位 只 
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如 朱 捅 入 框架 之 后 ， 框 涤 边 杠 不 可 见 ， 执 有 盒 看 ”/“ 可 视 化 助理 ”/“ 和 框架 边框 ” 
命令 ， 即 可 使 文档 窗口 中 的 框架 边框 可 见 。 


8.2.2 自 定 义 框架 


通 钟情 况 下 ， 使 用 Dreamweaver 预 置 的 框架 融 可 以 满足 页 面 布局 的 需要 。 如 果 要 使 用 
框架 设计 个 性 化 ， 或 较为 复 林 的 页 面 ， 就 要 日 定义 框架 了 。 

下 面 演示 自 定义 框架 设计 网 页 布局 的 具体 步 又 。 

01 旧 新 建 一 个 文档 并 保存 。 

02 执行 “查看 ”/“ 可 视 化 助理 ”/“ 框 架 边 框 ” 命 令 ， 显 示 文 档 窗 口 的 框架 边框 。 

03 将 忌 标 移 到 文档 窗口 顶部 ， 当 鼠标 指针 变 为 上 下 的 双 辐 箭头 时 ， 按 下 忌 标 左 键 
问 下 拖 动 到 合适 的 位 置 ， 即 可 用 一 个 框架 边框 水 平 切割 文 要 ， 效 果 如 网 8-3 所 示 。 

04 将 光标 放置 在 窗口 左 侧 的 框架 边框 上 ， 当 鼠标 指针 变 成 左右 双向 箭头 时 ， 按 下 
限 标 左 键 并 辣 右 拖 动 到 合适 的 位 置 ， 即 可 拖 出 一 条 垂直 的 框架 边框 分 割 页 面 。 此 时 的 页 面 
效果 如 图 8-4 所 示 。 

在 修改 框 染 结构 时 ， 把 光标 定位 在 框架 内 ， 然 后 执行 “修改 ”/“ 框 染 集 ” 亲 单 命令 下 
的 拆 分 框架 命令 ， 也 可 以 自 定 义 框架 。 


按 下 芯 标 加 下 拖 动 


图 8-3 ” 拖 动 框 染 边 框 图 8-4” 拖 动 框 染 边 框 


05 将 光标 定位 在 右 下 框架 中 ， 执 行 “ 修 改 ”/“ 框 架 集 ”/“ 拆 分 右 框 架 ” 命 令 ， 即 
可 将 右 下 框架 拆 分 为 两 个 区 域 ， 如 图 8-5 所 示 。 


图 8-5” 拆 分 右 框 架 的 效果 


一 个 网 页 可 以 包含 多 个 框架 ， 每 个 新 创建 的 框架 都 包括 它 目 己 的 框 染 集 HTML 文 档 和 
框 染 文 档 。 框 染 文 档 可 以 是 普通 的 网 页 ， 也 可 以 古 为 外 的 一 个 框架 网 页 ， 如 来 框 染 中 包含 
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的 网 页 十 一 个 框 染 网 页 ， 则 形成 了 框架 的 敬 套 。 例 如， 上 例 创建 的 框架 残 古 一 个 髓 套 框 染 。 
便 单 地 说 ， 购 套 框 架 束 是 一 个 框 染 中 的 框架 。 大 多 数 网 页 使 用 的 框架 部 古 髓 僚 框 淋 。 


8.2.3 noframe 和 iframe 


由 于 早期 版 本 的 浏览 器 不 文 持 框架 ， 当 页 面 中 含有 框架 时 ， 浏 览 器 吏 不 能 正确 显示 页 
面 的 内 容 ， 这 时 必须 编辑 一 个 无 框架 文档 ， 当 不 文 持 框 架 的 浏览 器 载 入 框架 体 文件 时 ， 浏 
览 器 只 会 显示 出 无 框架 内 容 。 

编辑 无 框架 内 容 的 具体 操作 步骤 如 下 : 

019 狐 建 一 个 文档 ， 并 在 文档 中 插入 一 个 框 染 集 ， 然 后 执行 “修改 ”/“ 框 架 集 ”/ 
“编辑 无 框架 内 容 ” 命 令 。 

02 肯 此 时 ， 当 前 的 文档 内 容 会 被 清除 ， 正 文 区 域 的 上 方 出 现 “ 无 框架 内 容 ” 字 样 。 

在 状态 栏 中 也 出 现 了 一 个 <noframe> 标 签 ， 如 图 8-6 所 示 。 


_ 
击 watitledgrameset-2 (HINL)* oe 


无 框架 内 容 | 


<noframes>|<body [NR le Q ll00% vy| 回 图 [ 


图 8-6 ”编辑 noframes 内 容 
可 以 在 该 窗口 中 输入 文本 、 插 入 图 像 、 编 辑 表格 、 制 作 表 单 等 内 容 ， 但 是 不 能 在 该 窗 
口中 创建 框 染 。 
03 再 次 执行 “修改 ”/“ 框 架 集 ”/“ 编 辑 无 框架 内 容 ” 命 令 ， 返 回 到 文档 窗口 中 。 
iframe 是 个 比较 新 的 标识 。 其 实 iframe 和 frame 功 能 一 样 ， 也 可 以 调用 一 个 外 部 文件 ， 
不 同 的 是 它 是 个 浮动 框架 ， 可 以 放置 在 网 页 中 的 任何 位 置 ， 而 且 它 引用 的 HTML 文 件 不 与 
另外 的 HTML 文 件 相 互 独立 显示 ， 而 是 直接 仍 入 在 一 个 HTMIL 文件 中 ， 与 这 个 HTML 文 件 
内 容 相 互 融合 ， 成 为 一 个 整体 。 此 外 ， 利 用 iframe 还 可 以 多 次 在 一 个 页 面 内 显示 同一 内 容 ， 
而 不 必 重 复写 内 容 ， 一 个 形象 的 比喻 即 “ 男 中 国 ” 电 视 。 这 种 极 大 的 自由 度 可 以 给 网 页 设 
计 答 来 很 大 的 灵活 性 。 
下 而 演示 iframe 的 使 用 方法 和 页 面 效 果 。 
01 新建 一 个 HTML 文 档 。 
02 执行“ 插入 ”/“HTML”/“ 框 架 ”/“IFRAME” 菜 单 命令 。 文 档 窗口 自动 切换 
为 “ 拆 分 ”视图 ， 并 在 “代码 ”视图 中 插入 <iframe></iframe> 标 记 ， 如 图 8-7 所 示 。 
03 9 在 文档 区 空 日 处 单 击 ， 即 可 在 “设计 ”视图 中 看 到 一 个 灰色 的 和 矩形， 表示 插入 
的 ifame， 如 图 8-8 所 示 。 
04 在 “代码 ?视图 中 将 <Iframe ></iframe> 修 改 为 <iframe name="il" src="iframe.html" 
width=600 helght=300></iframe> 。 
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Iframe 标 记 的 使 用 格式 如 下 : 
<Iframe name="mam src="URL" width="x” height="x" scrolling="[OPTION]" 


frameborder="x" "></iframe> 


央 wntitlea-! Gm)* 


击 titled-l Gum)* 


加 "text/html; charset=utf-8" /> 人 | "text/ et charset=utf-8" > 人 
| <tit1Le> 无 标题 文档 <Atit1Le> | <tit1Le> 无 标题 文档 <Atit1Le> 
每 | </head> </head> 
| 得 
62 | <hody = 47 | <hodvy><iframe></ iframe> = 
革 </bhody -村 这 </hodyd| 3 
</html> | </html> 本 
y 3 y 4 
图 8-7 插入 iframe 图 8-8 “设计 ”视图 中 的 iframe 


各 个 属性 的 功能 简要 介绍 如 下 : 

Name: 给 浮动 框架 命名 。 该 名 称 将 出 现在 超 链接 的 target 属性 下 拉 列 表 中 。 

Src: 浮动 框架 默认 显示 的 页 面 ， 既 可 是 HTML 文件 ， 也 可 以 是 文本 、ASP 等 。 

width、height: 浮动 框架 的 宽 与 高 。 

Scrolling: 设置 是 否 显示 滚动 条 .“auto” 表 示 上 自动 显示 ; “yes” 表 示 总 是 显示 ; “no 
则 表示 不 显示 。 

Frameborder: 浮动 框架 的 边框 大 小 ， 默 认 值 为 1。 为 了 与 邻近 的 内 容 相 融合 ， 币 设置 
为 0， 不 显示 。 

Marginwidth: 设置 浮动 框架 的 水 平 边 距 ， 单 位 为 像素 。 

Marginheight: 浮动 框 避 的 牌 直 边 距 ， 单 位 为 像素 。 

Align: 设置 浮动 框架 中 的 内 容 的 显示 方式 。 

05 在 “设计 ”视图 中 ， 将 光标 放置 在 插入 的 浮动 框架 下 方 ， 输 入 需要 的 文本 ， 并 设 
置 文本 的 超 链接 。 尤 其 需要 注意 的 是 ， 将 超 链接 文本 的 “target” 属 性 设置 为 “il1”， 即 本 
例 中 插入 的 浮动 框架 的 名 称 。 

06 保存 文档 。 按 F12 键 在 浏览 器 中 预览 页 面 效果 ， 如 图 8-9 所 示 。 


家 星 潜 切 , 对 长 享 晚 ， 又 条 
留恋 处 、 兰 身 催 发 。 
执政 相 看 泪眼 ， 竟 无 话 吐 | 
会 圭 土 十 昌 ? 屿 | 
CD 


2 


- 


p= = 队 一 


图 8-9_ iframe 的 效果 
与 框架 一 样 ， 浮 动 框架 也 可 以 艇 套 。 事 实 上 本 例 制 作 的 束 是 一 个 藤 套 的 浮动 框架 。 该 
框 染 中 默认 显示 的 文件 iframe.html 束 是 在 本 书 第 6 革 讲 解 浮动 框架 标记 时 制作 的 一 个 例子 ， 
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如 图 8-10 所 示 。 


位 立 基 刘 ， 汪 巷 晚 风 赴 。 | Bo 
陂 而 肘 、 坡 目 壮 忠 ， 富 孝 转 
接 睦 良 流 千里 。 | 湛 坪 串 湛 正和， 高 身 一 叶 
走 生 车身 此， 人 人 看 老 竟 | | 乔 世 离 江 请。 
产 二 全 de 上 ss = - | 一 
同 由 LB 起 
L Ta 二 可 
和 RN 
.AP 元素 定位 
昌 丙 槐 特 栅 省 AP 元 洋 挡 硒 情 转 挽 罗 AT 区 
DD==mini 宣 于 于 Db mr = 


图 8-10 ” 般 套 的 iame 效 果 
8.3 ”选择 框架 和 框架 集 


选取 框 染 和 框 染 集 可 以 直接 在 文档 窗口 中 进行 ， 也 可 以 在 “框架 ”面板 中 进行 。 

睦 认 情况 下 ， 在 页 面 中 插入 框 染 后 ， 会 目 动 选择 整个 框 染 作为 操作 对 象 ， 此 时 所 有 子 
框 染 的 边界 都 会 被 虚线 包围 。 如 果 当 前 选择 的 是 一 个 子 框 架 ， 需 要 重新 选择 整个 框架 ， 可 
以 执行 以 下 操作 之 一 : 

(1) 将 鼠标 指针 移动 到 框架 的 某 条 边框 上 ， 当 鼠标 指针 变 为 水 平 双 同 箭头 〈 左 右边 
框 ) 或 垂直 双 辐 箭头 《上 下 边框 ) 时 ， 单 击 边 框 即 可 选中 整个 框架 。 在 文档 窗口 中 ， 被 选 
取 的 框架 周围 有 虚线 包围 。 

(2) 将 鼠标 指针 移动 到 第 一 次 分 割 框 染 的 边框 位 置 ， 当 孔 标 指针 变 为 水 平 双 癌 和 贡 头 
(左右 边框 ) 或 垂 百 双 回 箭 头 〈 上 下 边框 ) 时 ， 单 击 边 框 即 可 选中 整个 框架 组 。 

(3) 执行 “窗口 ”/“ 框 染 ” 命 令 可 以 打开 “ 框 淋 ”和 面板， 用 限 标 点 击 框 染 的 边框 即 
可 选取 框 染 。 

框架 面板 提供 框架 集 内 各 个 框 染 的 可 视 化 表示 形式 。 它 能 够 显示 框 染 集 的 层次 结构 ， 
而 这 种 层次 在 文档 窗口 中 的 显示 可 能 不 够 直观 。 

如 果 要 选择 框 染 中 的 系 个 子 框 染 ， 可 以 执行 以 下 操作 之 一 : 

(1) 在 设计 和 帘 口 中 按 住 Alt 键 的 同时 ， 用 也 标 单 击 所 要 选取 的 框 染 区 域 。 选 中 后 的 子 
框 染 周围 有 虚线 包围 。 

(2) 打开 图 8-11 所 示 的 框架 管理 面板 ,在 需要 选择 的 子 框 染 的 位 置 单 击 限 标 。 文档 千 
口中 该 子 框架 的 周围 被 虚线 包围 ， 表 示 它 已 经 被 选中 ， 如 网 8-12 所 未 。 

和 


站 


选中 的 子 框 以 


图 8-11 框架 省 理 面 板 图 8-12 ”选择 一 个 子 框 染 
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如 末 要 选择 极 僚 框 染 ， 将 鼠标 指针 移动 到 址 赛 框 淋 中 子 框架 公共 的 边框 ， 当 忌 标 指针 
变 为 水 平 双 同 箭 头 《〈 左 右边 框 ) 或 牌 生 双 同 第 尖 《上 下 边框 ) 时 ， 单 击 边框 即 可 选中 骸 公 
框 染 。 选 中 的 迄 僚 框架 在 文档 窗口 中 有 虚线 包围 。 


8.4 ”保存 框 染 集 和 框 染 


知 要 在 浏览 右 中 预览 框架 网 页 ， 必 须 先 保存 框架 网 页 。 由 于 每 一 个 框架 代表 一 个 单独 
的 网 页 ， 所 以 在 保存 框架 结构 的 文档 时 ， 不 但 要 保存 整个 文档 的 框架 结构 ， 还 要 保存 各 个 
框架 文件 。 和 否则 ， 框 架 中 输入 的 内 容 会 丢失 。 

下 和 面 演示 保存 框架 集 和 框架 的 操作 步 又 。 

01 新 建 一 个 HTML 文档， 并 插入 一 个 先 套 框架 ， 如 图 8-13 所 示 。 


击 wntitlea-z Crrrmr* 


图 8-13 ”每 保存 的 框 淋 


02 在 “框架 ”面板 中 选中 整个 框架 ， 选 择 “ 文 件 ”/“ 保 存 框架 页 ” 闲 蛙 命令 ; 或 
选择 “文件 ”/“ 框 架 集 男 存 为 ”命令 , 只 保存 框架 集 文 件 , 在 最 后 退出 文档 时 , Dreamweaver 
会 弹出 对 话 框 询问 是 否 你 存 各 个 框架 文件 。 

03 上 在 框架 内 单 击 ， 然 后 选择 “文件 ”/“ 保 存 框架 ”命令 ， 则 只 保存 框架 文件 。 

04) 执行 “文件 ”/“ 保 存 全 部 ”命令 ， 则 会 弹出 一 个 保存 文件 窗口 ， 同 时 会 显示 整 
个 框架 被 选中 的 状态 。 

05 在 弹出 的 保存 文件 窗口 中 输入 文件 名 ， 然 后 单 击 “保存 ”按钮 保存 框架 集 文件 。 

接 看 ， 义 会 弹出 下 一 个 保存 文件 的 窗口 ， 同 时 文档 窗口 正 要 保存 的 文件 所 在 的 子 框 淋 
被 选中 。 在 弹出 的 保存 文件 窗口 中 输入 文件 名 ， 然 后 单 击 “ 保 存 ” 按 钮 保存 该 框架 文件 。 
同 理 保 存 其 他 的 框架 文件 。 如 果 有 n 个 框 锅 ， 残 必须 保存 n+1 次 文件 。 

图 8-13 所 示 的 框 染 集 由 三 个 框架 组 成 ， 每 个 框 染 中 都 有 独立 的 一 个 HTML 文 档 。 因 此 ， 
保存 该 框架 集 时 ， 实 际 上 要 保存 四 个 独立 的 文件 ， 即 框架 集 文件 和 三 个 框架 文件 。 


8.5 编辑 框 洒 


在 页 面 中 创建 框架 之 后 ， 框 架 的 大 小 、 外 观 也 许 不 满足 需要 ， 或 者 要 编辑 框架 文件 ， 
这 时 需要 进一步 调整 框架 。 下 向 介绍 编辑 框 染 时 常用 的 一 些 操作 。 
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8.5.1 设置 框架 属性 


与 其 他 页 面 元 到 一 样 ， 在 属性 和 面板 中 可 以 定义 框架 或 框 染 集 的 各 种 常用 属性 ， 如 框 染 
名 称 、 源 文件 、 页 边 距 、 框 以 集 的 边线 项 色 和 宽度 等 。 

在 页 面 中 选取 了 一 个 框架 之 后 , 文档 窗口 抵 部 即 可 出 现 框 染 属 性 和 面板 , 如 图 8-14 所 示 。 

尾 性 


Ta| 框架 名 称 。 源 交 件 @)】J/C|/Inetpub/blog/UntitledFramne-2| 3 回 边框 上 @) 
leftFrame | 滚动 (0) 闷 不 能 调整 大 小 &) ”边框 额 色 (C) 「 -| 
过 界 宽度 蚀 ) 
进 界 高 度 出) 


B® 


图 8-14 框架 属性 面板 


框架 属性 面板 中 的 各 项 属性 功能 简要 介绍 如 下 : 

“框架 名 称 ”: 用 于 对 框 染 进行 命名 ， 以 便 在 代码 中 进行 引用 。 框 染 名 称 只 能 使 用 子 
母 、 数 字 和 下 划 线 (_) ， 且 必须 以 字母 开头 ， 且 区 分 大 小 与 。 

“ 源 文 件 ”: 指定 框架 文件 的 路 从 与 名 称 。 

“滚动 ”: 指定 在 框 染 中 是 否 显 示 深 动 条 。 将 此 选项 设置 为 “默认 ”将 不 设置 相应 属 
性 的 值 ， 从 而 使 各 个 浏览 井 使 用 其 默认 值 。 大 多 数 浏览 句 默 认为 “ 目 动 ”， 这 意味 月 只 有 
在 浏览 喜 窗 口中 没有 足够 空间 显示 当前 框架 的 完整 内 容 时 才 显 示 深 动 条 。 

“边框 ”: 是 否 在 浏览 器 中 显示 框架 的 边框 。 该 项 设置 会 惕 盖 框 架 集 属性 面板 中 所 做 
的 设置 ， 并 且 只 有 妆 该 框架 所 有 相 邻 的 框架 的 边框 都 设置 为 “人 否 ” 时 ， 才 能 取消 当前 框 染 
的 边框 。 

“不 能 调整 大 小 ”: 决定 是 侍 允 许 读者 改动 框 染 的 大 小 。 如 果 选 中 此 项 ， 则 访问 者 将 
无 法 通过 拖 动 框 染 边框 在 浏览 旧 中 调整 框架 大 小 。 

“边界 宽度 《高 度 ) ”: 左右 (上 上 下) 页 边 距 ， 设 症 内 容 与 框架 边框 左右 (上 下 ) 的 
距离 《框架 边框 和 内 容 之 间 的 空间 ) 。 

选中 了 一 个 框架 集 之 后 ， 文 档 稳 口 的 下 端 将 出 现 框 淋 集 属性 面板， 如 图 8-15 所 示 。 


属性 
] F| 框架 集 边框 @) 边框 颜色 (CC) | -| 四 
条: ?边民 宽度 遇 Es 
全 单位 由 
和 pe 活 定 范围 


图 8-15 ”框架 集 属性 面板 


框架 集 属性 面板 中 的 各 项 属性 功能 简要 介绍 如 下 : 

“框架 集 ”: 此 属性 显示 了 当前 选 定 的 框架 集中 所 包含 的 框架 行 数 和 列 数 。 

“边框 ”:， 是 人 盏 在 浏览 费 中 显示 框 染 的 边框 。 该 设置 会 馈 框 染 属 性 面板 中 的 “边框 ” 
属性 窗 击 。 

“行列 选 定 范围 ”: 图 形 化 地 显示 选 定 框架 集 的 结构 ， 单 击 可 以 选中 相应 的 框 染 。 使 
用 该 属性 项 ， 可 以 精确 地 分 配 各 个 框 保 所 占用 的 空间 。 步 又 如 下 : 

(1) 在 属性 面板 上 点 击 “ 行 列 选 定 范围 ” 框 内 的 标签 选取 行 或 列 。 
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(2) 在 “ 值 “ 域 中 输入 二 069》 议和 首 所 时 红 列 的 八 十。 

(3) 在 “单位 ”下 拉 列 表 中 选择 值 的 度量 单位 

用 户 还 可 以 通过 鼠标 的 拖 动 操作 近似 地 调整 框 殿 的 矿 二 。 将 鼠标 指针 移 到 框架 的 边框 
上 ， 当 鼠标 变 为 双 同 箭头 时 ， 按 下 鼠标 左 键 并 拖 动 鼠标 ， 即 可 改变 框 洪 的 大 小 。 


8.5.2 ”设置 框架 的 背景 


与 其 他 页 面 布局 工具 不 同 ， 不 能 在 框架 的 属性 面板 上 设置 框架 的 背景 ， 而 是 在 “页 面 
属性 ”对 话 框 中 进行 设置 。 这 也 很 好 理解 ， 因 为 每 个 框架 文件 都 是 一 个 独立 的 HTML 文 件 。 
下面 演示 设置 框架 背景 的 操作 方法 。 

01 新建 一 个 HTML 文 件 ， 然 后 插入 一 个 预 置 框 架 ， 并 在 各 个 框架 中 输入 需要 的 内 
容 ， 如 图 8-16 所 示 。 

02 将 光标 放置 在 页 面 顶 部 的 框架 中 ， 执 行 “ 修 改 ”/“ 页 面 属性 ”命令 ， 打开“ 页 
面 属 性 ”对 话 框 。 

03 肯 在 “背景 颜色 ”文本 框 中 输入 所 需要 的 背景 颜色 #6CF。 

04) 同 理 ， 设 置 左 侧 框架 的 背景 颜色 为 #0DD81， 并 在 “链接 ”分 类 中 设置 “链接 
颜色 ”为 绿色 ，“ 下 划 线 样式 ”为 “始终 无 下 划 线 ”。 

05 虽 执行 “文件 ”/“ 保 存 全 部 ”命令 ， 保 存 框架 集 文 件 和 所 有 框架 文件 。 


06 按 F12 键 在 浏 只 占 预 多 ， 效 果 如 图 8-17 所 示 。 
我 的 收藏 


图 8-16 ”初始 页 面 效果 图 8-17 设 症 页 面 属性 后 的 页 面 效 幸 


8. 5.3 在 框 染 中 打开 文档 


采用 框架 结构 ， 一 个 原因 是 为 了 在 同一 窗口 中 可 以 同时 显示 多 个 文件 ， 另 一 个 原因 是 
可 以 采用 导航 条 技术 方便 地 实现 各 文件 之 间 的 切换 。 经 第 见 到 的 系统 帮助 文件 就 是 一 个 上 典 
型 的 框架 文件 ， 在 页 面 堪 侧 单 击 了 帮助 主题 后 ， 页 面 右 侧 显示 相应 的 帮助 信息 。 其 原理 束 
古 为 不 同 的 帮助 主题 指定 链接 文件 ， 并 指定 链接 文件 在 右 侧 的 框 保 中 打开 。 

要 在 一 个 框 染 中 使 用 链接 以 打开 为 一 个 框架 中 的 文档 , 必须 设置 链接 目标 ,链接 的 “ 目 
标 ” 属 性 指定 在 其 中 打开 链接 的 内 容 的 框 染 或 窗口 。 下 面 演示 在 一 个 框 染 中 打开 文档 的 操 
人 一 

01 9 继续 上 一 节 的 例子 。 在 设计 视图 中 ， 选 择 要 作为 超级 链接 的 文本 或 对 象 ， 本 例 
选择 元 侧 框 如 中 的 “网 片 二 ”。 
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02 县 在 属性 检查 者 的 “链接 ” 域 蛙 国 单 击 文 作 关 图 标 并 选择 要 链接 到 的 文件 。 

039 在 “目标 ”弹出 式 末 单 中 ,选择 打开 链接 文档 的 框架 或 窗口 。 本 例 选择 “main”， 
即 右 侧 框 淋 。 

六 面 在 属性 检查 器 中 命名 了 框 如 ， 所 以 框架 名 称 出 现在 “目标 ”下 拉 列 表 中 。 选 择 该 
项 ， 表 示 在 该 命名 的 框 淋 中 打开 链接 页 面 ， 同 时 答 换 该 框架 中 原 有 的 内 容 。“ 目 标 ” 下 拉 
列表 中 的 其 他 选项 的 功能 已 在 本 书 前 面 的 章节 中 介绍 过 了 ， 在 此 不 再 重复 。 

04 曙 保存 文 要 ， 按 下 F12 键 在 浏览 右 中 预览 页 面 效 末 。 


提示 :对 有 在 框架 集 内 编辑 文档 时 才 显 示 框 架 名 称 ， 在 文档 自身 的 文档 窗口 中 纺 


| 辑 该 文档 时 (在 框架 集 之 外 ) ， 框 架 名 称 不 显示 在 “目标 ”弹出 式 菜单 中 。 如 果 正 编 | 
| 辑 框 架 集 外 的 文档 ， 则 可 以 将 目标 框架 的 名 称 键入 “目标 ”文本 框 中 。 如 果 正 链 接 到 | 
' 站 点 外 的 菜 一 页 面 ,请 始终 使 用 _top 或 _blank 来 确保 该 页 面 不 会 显示 为 站 点 的 一 部 分 。| 


8.5.4 删除 框架 


删除 框架 的 操作 比较 特殊 。 奉 按照 删除 其 他 页 而 元素 的 方法 ， 选 中 框架 之 后 按 Delete 
键 ， 用 户 会 发 现 ， 框 架 依 旧 保 留 在 页 面 中 ， 而 不 是 像 其 他 对 和 象 那 样 被 柚 近 。 删 除 框 染 的 方 
法 如 下 : 

(1) 将 光标 放 在 框架 的 边框 上 。 

(2) 当 光 标 会 变 为 双向 箭头 时 按 住 鼠标 左 键 ， 将 框架 的 边框 拖 出 父 框架 或 页 面 之 外 ， 
即 可 将 这 个 框架 删除 。 

如 果 对 HTML 语 言 比较 熟悉 ， 用 户 还 可 以 直接 在 文档 的 HTML 代 码 中 删除 框架 。 


8.6 ” 框 染 应 用 示例 


以 上 问讯 者 介绍 了 在 Dreamweaver CS6 中 框架 的 创建 与 设置 ， 下 面 将 完成 一 个 包含 框 
染 结 构 的 页 面 制 作 ， 以 加 深 读者 对 框架 的 理解 。 本 例 页 面 由 三 个 框架 组 成 '， 上 框架 、 左 下 
框架 和 右 下 框架 ,分别 用 于 显示 主题 、 导 般 和 教程 的 内 容 。 当 早 击 导航 按钮 时 ， 右 下 框架 
将 切换 到 想 要 浏览 的 内 容 。 

019 新 建 一 个 HTML 页 面 ， 执 行 “ 查 看 ”/“ 可 视 化 助理 ”/“ 框 架 边框 ”菜单 命令 显 
未 文档 窗口 的 框架 边框 。 

02 将 女 标 移动 文档 窗口 的 上 边沿 ， 当 羽 标 指针 变 为 上 下 的 双 问 第 头 时 ， 按 下 鼠标 
左 键 并 拖 动 到 合适 的 位 置 。 此 时 文档 窗口 税 一 条 水 平 的 框架 边框 分 割 为 上 下 两 部 分 。 

03 骨 选中 下 方 的 框架 ， 执 行 “ 插 入 ”/“HTML”/“ 框 架 ”/“ 左 对 齐 ” 沫 单 命 令 ， 在 
此 框 染 中 髓 套 一 个 框架 集 ， 调 整 框架 大 小 。 

04 执行 “窗口 ”/“ 框 架 ” 采 单 命令 ， 打开“ 框架 ”和 面板 。 在 该 面板 中 选中 框架 集 
的 各 个 区 域 , 在 属性 和 面板 中 为 选中 的 区 域 命名 。 本 例 中 , 由 上 到 下 由 左 到 右 依 次 命名 为 “ 标 
匮 栏 ”、“ 链 接 柱 ”和 “内 容 柱 ”。 
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她 8 泪 


泌 浪 栏 商 丛 避 


& DreamWearer 56 中 广 版 入 门 与 手 高 实例 条 机 


二 05 有 选中 “标题 栏 ” 框 架 ， 单 击 鼠 标 右键 ， 从 弹出 的 上 下 文 菜单 中 选择 “页 面 属性 ” 
命令 ， 并 在 弹出 的 对 话 框 中 为 此 框 染 选择 背景 图 像 。 同 样 地 ， 为 其 他 两 个 框架 设置 背景 图 
像 和 颜色 。 此 时 的 页 面 效 末 如 图 8-18 所 示 。 

和 069 在 “标题 栏 ” 框 架 中 输入 文本 “WELCOME”， 并 在 文本 属性 面板 设置 文本 的 
字体 、 大 小 和 颜色 。 

和 07 引 在 其 他 两 个 框架 中 输入 文本 ， 并 进行 文本 属性 设置 ， 此 时 得 到 的 设计 视图 如 图 
8-19 所 示 。 完 成 了 以 上 步骤 后 ， 页 面 制作 工作 完毕 。 


号 最 终 效 玉 图 。 


py 在 此 准 
材 ， 洋基 的 对 冯 基 贡 
的 部 分 网 站 链接 ， 供 您 


图 8-18 设置 背景 色 后 的 框架 效果 图 8-19 设置 背景 色 后 的 框架 效果 
8.7 ”实例 制作 之 使 用 框架 显示 页 面 


前 面 的 儿 革 中 己 制 作 了 主页 的 各 个 部 分 ， 在 此 使 用 框 染 将 各 个 部 分 进行 规划 ， 以 形成 
一 个 完整 的 页 面 ， 步 又 如 下 : 

01 打开 已 基本 完成 的 主页 index.html。 

EL02 肯 选择 “文件 ”/ “另存 为 ”命令 ， 在 弹出 的 对 话 框 中 设置 文件 名 为 photo.html。 即 
导航 图 片 “ 伊 人 风 疝 ”的 链接 目标 。 

和 03 生 删除 页 面 中 的 正文 内 容 ， 只 保留 页 面 LOGO、 导 航 条 和 正文 部 分 前 两 行 的 文字 
和 图 厂 。 此 时 的 页 面 效 未 如 图 8-20 所 不 。 
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04 自 选中 正文 部 分 的 其 他 三 行 , 击 局 性 面板 时 的 合并 单元 格 按钮 ”将 选中 的 三 行 


合并 为 一行 ， 没 轩 间 元 格 内 容 的 水 平 对 方式 为“ 居中 区 弄 ”: 尖 直 对 并 方式 为“ 项 剖 ” 
05 有 将 光标 放置 在 合并 后 的 单元 格 中 , 执行 “插入 ”/“HTML”/“ 框 架 ”/“IFRAME" 
菜单 命令 ， 在 页 面 中 插入 一 个 浮动 帧 框架 。 此 时 的 页 面 效果 如 图 8-21 所 示 。 


曙 c: inetpubvwwwzootAblogAphoto0. html (XHTNL)* 


<marduee behavior="scroll" direction="up" 四 
hspace="O0" height="120" vspace="10" 机 
loop="-1" scrollamount="1" scrolldelay="60"> 
<p Class="STYLE2">ENnhsp ;</ p> 
</marquee><iframe></iframe></td> 
CAEES 
</table> </td> 
</tr> 
<tr> 
<td colspan="2" 半 aiv 只 LIGn= CentELE">< 1 一 一 
#BeginLibrarvItem "/Librarvy/copyright.1bi" --><imdo 
src="images/1133629607 .gif" width="500" height="50" 


欢 吕 光临 我 的 小 屋 


2 | 山 山 
ody><div><table><tr><td> [R|W AQ Io00% v| 回回 [| 516 x 203 (84Kk/2 


8-21 插入 iframe 
06 在 “代码 ”视图 中 ， 将 IFrame 的 标记 <iframe></iframe>3> 修 改 为 如 下 代码 : 


<iframe src="1mages/xiangce/index.html" name=' 1] width=480 height=540 
bgcolor=green> </iframe> 


其 中 ，src="images/xiangce/index.html" 表 示 在 浮动 帧 框架 中 显示 制作 的 网 站 相册 索引 
页 。 


入 


07 保存 页 面 ， 按 F12 键 在 浏览 吉 中 预览 页 面 ， 如 图 8-22 所 示 。 


og 


盆 大 风尚 
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划 8 法 


浸 六 术 辜 了 位 只 


| 

“BE Se | | | 

了 区 
| 一 上 


ji 


DreamWearerYC56 中 文 腑 入 门 与 提高 实例 灯 碍 
Eh | 

单 击 其 中 一 幅 缩 略图 ， 即 

单 击 链接 文本 “前 一 个 ” 


所 选 图 片 的 大 图 , 效果 如 图 8-23 所 示 。 
、 从- 一个? 9 即 可 在 图 片 中 切换 浏览 。 单 市 “首页 ” 》 
即 可 返回 到 如 图 8-20 所 示 的 页 面 。 


: 项 框 架 TT 


静 险 风声 


伊人 风尚 /2.jpg 


革 一 半 | 首页 | 下 一 个 


图 8-23 ”页面 预览 效 采 
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9.1 创建 表单 网 页 


一 个 完整 的 表单 应 该 有 两 个 重要 组 成 部 分 : 一 是 含有 表单 和 表单 元 系 的 网 页 文档 ， 用 
于 收集 用 户 输 入 的 信息 ; 另 一 不 是 用 于 处 理 用 户 输入 的 信息 的 服务 器 端 应 用 程序 或 客户 站 
脚本 ， 如 CGI、JSP、ASP 等 。 

用 户 提 交 表 单 之 后 , 即 可 将 表单 内 容 传送 到 服务 器 上 , 并 由 事先 接 写 的 脚本 程序 处 理 ， 
最 后 服务 器 再 将 处 理 结果 传 回 给 浏览 者 ， 即 提交 表单 之 后 出 现 的 页 面 。 

表单 中 包含 多 种 对 象 〈 也 称 作 表 单 控件 ) 。 例 如 ， 用 于 输入 文字 的 文本 域 ， 用 于 发 送 
命令 的 按钮 ， 用 于 选择 的 单 选 本 和 复 选 枉 ， 用 于 设置 信息 的 列表 和 荣 单 等 。 所 有 这 些 控 件 
与 在 Windows 各 种 应 用 程序 中 遇 到 的 非 营 相似 。 如 采 熟 悉 肝 种 脚本 语言 ， 用 户 还 可 以 编写 
脚本 或 应 用 程序 来 验证 输入 信息 的 正确 性 。 例 如 可 以 检查 某 个 必须 填写 的 文本 域 是 否 包 合 
了 一 个 特定 的 值 。 

Dreamweaver CS6 还 集成 了 Adobe 公 司 的 轻 量 级 的 AJAX 框 架 Spry。 利 用 一 系列 了 预 置 的 
表单 验证 控件 ， 用 户 可 以 更 加 轻松 快捷 地 以 可 视 化 方式 设计 、 开 有 友和 部 萌动 态 用 户 界面 。 


9.1.1 插入 表单 域 


制作 表单 网 页 ， 首 先 要 在 文档 中 插入 表单 。 插 入 表单 的 具体 操作 如 下 : 

(1) 新 建 一 个 文档 ， 将 光标 管 于 要 插入 表单 的 位 置 。 

(2) 执行 “搬入”/“ 表 单 ”/“ 表 单 ” 有 亲 蛙 命令 ; 或 者 在 图 9-1 所 示 的 “表单 ”和 面板 
上 单 击 “ 表 单 ” 按 钮 中 ， 在 页 面 中 添加 表单 。 

插入 后 的 表单 如 图 9-2 所 示 。 在 设计 视图 中 , 用 红色 的 点 状 轮廓 线 表 示 插 入 的 表单 。 如 
末 看 个 到 轮廓 线 ， 可 以 执行 “ 合 看 ”/“ 可 视 化 助理 ”/“ 表 格 边 框 ” 采 单 命令 ， 显 不 红色 
的 轮 亡 线 。 


Es 
表单 回 | 口 怨 辐 | 


汗 固 回 轩 | 国 团 | 国 


Ed 表单 边框 


body “form#forml >|<h24 池 | 加 


图 9-1 表单 面板 图 9-2 ”表单 边框 


| 一 提示 : 表单 标记 可 以 左 套 在 其 他 HTML 标记 中 ,其 他 HTML 标记 也 可 以 庶 套 在 表 | 
但 是 ， 一 个 表单 不 能 谋 套 在 另 一 个 表单 中 ， 


(3) 选择 “ 窗 晶 中/“ 必 性” 命令， 打开 如 图 9.3 所 示 的 表单 属性 面板， 对 表单 参数 进 - 
行 设置 。 
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尾 性 7" 三 


本 表单 I 动作 加 目标 四 | 同类 号 无 | 
加 1 施法 入 


图 9-3 ”表单 属性 面板 


属性 面板 中 的 各 个 参数 简要 介绍 如 下 : 

“表单 ID”: 对 表单 命名 以 进行 识别 。 该 名 称 必 须 唯 一 ， 对 应 于 <form> 标 记 的 ID 属 
性 。 只 有 为 表单 命名 后 表单 才能 被 脚本 语言 引用 或 控制 。 

“动作 ”: 注 明 用 于 处 理 表单 信息 的 脚本 或 动态 页 面 路 径 ， 该 属性 决定 如 何 处 理 表 单 
内 容 。 可 以 直接 输入 URL， 或 者 单 击 右边 的 文件 夹 图 标 浏览 选择 URL。 通 常 被 设 定 为 运 
行 一 个 特定 的 脚本 程序 或 者 发 送 e-mail 的 URL。 

“方法 ”: 选择 将 表单 数据 传输 到 服务 器 的 方法 。 

“POST ”方法 将 在 HTTP 请 求 中 髓 入 表单 数据 ， 将 表单 值 以 消 居 方式 送出 ， 对 传送 
的 数据 量 没 有 限制 。 

“GET” 方 法 将 被 提交 的 表单 值 作为 请 求 该 页 面 的 URL 的 附加 值 改 送 ， 对 传送 的 数据 
量 做 了 限制 。 

“默认 ”方法 使 用 浏览 器 的 默认 设置 将 表单 数据 发 送 到 服务 嚣 。 通 常 默认 方法 为 


提示 :不 要 使 用 GET 方法 发 送 长 表单 ，URL 的 长 度 限制 在 8192 个 字符 以 内 ， 如 


| 果 发 送 的 数据 量 太 大 ， 数 据 将 被 截断 ， 从 而 导致 意外 的 或 失败 的 处 理 结果 。 而且， 在 
发 送 机 密 用 户 名 和 密码 、 信 用 卡号 或 其 他 机 密 信 息 时 ， 用 GET 方法 传递 信息 不 安全 。， 
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“目标 ”: 在 目标 窗口 中 显示 调用 程序 所 返回 的 数据 。 如 果 命 名 的 窗口 尚未 打开 ， 则 
打开 一 个 共有 该 名 称 的 新 窗口 。 

“编码 类 型 ”: 指定 对 提交 给 服务 喜 进 行 处 理 的 数据 使 用 的 编码 类 型 。 

默认 设置 application/Xx-www-form-urlencode 通 常 与 POST 方 法 协同 使 用 。 如 果 要 创建 文 
件 上 传 域 ， 则 应 指定 multipart/form-data MIME 关 型 。 

在 文档 窗口 中 插入 表单 之 后 ， 选 中 表单 ， 可 以 在 “代码 ”视图 中 看 到 类 似 如 下 的 代码 : 

<form action="result.asp”" method="post" name="form1" target="_blank" 1d="firstform" > 

</form> 

这 上 段 代码 表示 将 名 为 firstform 的 表单 以 post 的 方式 提交 给 result.asp 进 行 处 理 , 日 提交 结 
果 在 一 个 狐 的 页 面 显示 ， 提 交 的 MIME 编 码 为 默认 的 application/x-www-form-urlencode 类 
型 。 

创建 表单 之 后 ， 就 可 以 在 表单 内 创建 各 种 表单 对 象 了 。 表 单 的 所 有 元 系 都 应 包含 在 表 
单 标 签 xform>... </form> 之 中 。 在 Dreamweaver CS6 中 ， 对 表单 对 象 的 操作 命令 ， 主 要 集中 
在 “插入 ”/“ 表 单 ”/“ 表 单 对 象 ” 沫 单 命令 中 ， 或 在 网 9-1 所 示 的 “插入 ”/“ 表 单 ” 面 板 
中 。 下 面 对 这 些 表单 元 素 进 行 向 单 的 介绍 。 

: 文本 字段 ， 在 表单 中 插入 文本 输入 框 。 
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: 隐藏 域 ， 在 表单 中 搬入 包含 隐 着 的 信息 。 

: 文本 区 域 ， 在 表单 中 插入 可 以 输入 多 行文 本 的 文本 域 。 

: 单 选 按钮 ， 用 于 在 提供 的 多 个 选项 中 做 出 单个 选择 。 

: 复 选 枉 ， 用 于 在 提供 的 多 个 选项 中 做 出 多 个 选择 。 

: 复 选 框 组 ， 用 于 创建 多 个 复 选 框 ， 并 使 这 些 复 选 框 成 为 一 组 。 

: 单 选 按钮 组 ， 用 于 创建 多 个 单 选 控 钮 ， 并 使 这 些 单 选 按 钮 成 为 一 组 。 
: 列表 / 亲 单 ， 在 网 页 中 以 列表 的 形式 为 用 户 提 供 一 系列 的 预 设 选择 项 。 
: 路 较 菜 单 ， 提 供 一 个 包含 跳 转 动作 的 沫 单列 表 。 

: 图 像 域 ， 用 疼 形 对 象 答 换 表 单 中 的 标准 按钮 对 象 。 

: 文件 域 ， 在 网 页 中 插入 一 个 文件 地 址 的 输入 选择 栏 。 

: 按钮 ， 用 于 触发 服务 霹 端 脚本 处 理 程 序 的 表单 对 象 。 

: 标签 。 

在 表单 中 插入 该 对 象 时 ， 将 拆 分 文档 窗口 ， 并 排 显 示 代 码 视 图 和 设计 视图 ， 并 在 代码 
视图 中 添加 xlabel> 标 签 和 </label> 标 签 ， 在 这 两 个 标签 乙 间 用 户 可 以 输入 相应 的 文本 或 代 
人 码 。 

品 : 字段 集 ， 用 于 将 它 所 包围 的 元 素 用 线 框 衬托 起 来 。 

在 表单 中 插入 该 对 象 时 ， 将 弹出 一 个 “字段 集 ” 对 话 框 。 在 对 话 框 的 “标签 ”文本 框 
中 可 以 输入 内 容 ， 系 统 目 动 将 类 似 如 下 的 标签 和 代码 加 入 到 表单 源 代码 中 。 效 来 如 图 9-4 
所 示 。 


<fieldset> 


la 旧 肛 


局 


回帖 同上 交 | 咯 


U 


Fy 
[= 
站 


<] d> 字 段 集 </] d> 
egend> 闻 以 未 </legen Happy New Yearl! 
Happy New Year! 
</fieldset> 


图 9-4 字段 集 


于 : Spry 验证 文本 域 , 用 于 在 站 扣 访 问 者 输入 文本 时 显示 文本 的 状态 。 例 如 有 效 或 无 
效 或 必需 值 等 。 

每 当 验 证 文本 域 构件 以 用 户 区 互 方式 进入 其 中 一 种 状态 时 ，Spry 框架 旬 辑 会 在 运行 
时 问 该 构件 的 HIML 容器 应 用 特定 的 CSS 关 。 

到 :Spry 验证 文本 区 域 ， 该 区 域 在 用 户 输入 几 个 文本 句子 时 显示 文本 的 状态 。 

如 果 文 本 区 域 是 必 填 域 ， 而 用 户 没 有 输入 任何 文本 ， 该 构件 将 返回 一 条 消 轧 ， 声 明 必 
须 输 入 值 。 

光 : Spry 验证 复 选 框 , 是 HTML 表单 中 的 一 个 或 一 组 复 选 框 , 该 复 选 框 在 用 户 选择 
(或 没有 选择 ) 复 选 框 时 会 显示 构件 的 状态 。 

至，Spry 验证 选择 ， 是 一 个 下 拉 菜 单 ， 该 菜单 在 用 户 进行 选择 时 会 显示 构件 的 状态 
《有 效 或 无 效 )。 

到 :Spry 验证 密码 ， 是 一 个 密码 文本 域 ， 可 用 于 强制 执行 密码 规划 (例如 ， 季 符 的 数 
目 和 关 型 )。 该 构件 根据 用 户 的 输入 提供 警告 或 错误 消息 。 

开 : Spry 验证 确认 ， 是 一 个 文本 域 或 密码 表单 域 ， 当 用 户 输入 的 值 与 同一 表单 中 类 似 
域 的 值 不 匹配 时 二 该 构件 将 亚 未 有效 或 无 效 状态 。 


170 


验证 确认 构件 还 可 以 与 验证 文本 域 移 件 一 起 使 用 ， 用 于 验证 电子 邮件 地 址 。 
到 ,Spry 验证 单 选 按钮 组 ， 是 一 组 单 选 按钮 ， 可 支持 对 所 选 内 容 进行 验证 。 该 构件 可 
强制 从 组 中 选择 一 个 单 选 按钮 。 


9. 1.2 文本 字段 和 文件 域 


“文本 字段 ” 即 网 页 中 供用 户 和 输入 文本 的 区 域 ，“ 文 本 字段 ”分 为 单行 、 多 行 和 密码 
三 种 类 型 ， 可 以 接受 任何 类 型 的 文本 、 子 母 或 数 子 。 
文件 域 与 单行 文本 字段 非常 相似 ， 不 同 的 是 文件 域 多 了 一 个 “浏览 ”按钮 ， 用 于 浏览 
选择 随 表单 一 起 上 传 的 文件 。 利 用 文件 域 的 功能 ， 可 以 将 图 像 文 件 、 压 缩 文 件 、 可 执行 文 
件 等 本 地 计算 机 上 的 文件 上 传 到 服务 占 上 ， 前 提 条 件 是 服务 占 文 持 文件 匿名 上 传 功能 。 
下 和 面 演 示 在 文档 中 插入 “单行 文本 域 ”、“ 多 行文 本 域 ”、“ 密 码 域 ” 和 “文件 域 ” 
的 具体 操作 。 

019 新建 一 个 HITML 文 件 。 执 行 “ 插 入 ”/“ 表 单 ”/“ 表 单 ” 命 令 ， 或 者 单 击 “ 插 入 ” 
栏 中 “表单 ”面板 上 的 “表单 ”按钮 名， 在 文档 中 插入 一 个 表单 。 

02 在 表单 的 属性 面板 中 ， 将 表单 的 “MIME 关 型 ”设置 为 multiparVform-data， 并 且 
将 其 “方法 ”属性 设置 为 POST 方式 。 该 步 的 设置 主要 用 于 上 传 文件 。 

03 将 光标 置 于 表单 中 ， 输 入 “了 昵 称 : ”， 然 后 执行 “插入 ”/“ 表 单 ”/“ 文 本 字段 ” 
菜单 命令 ， 或 单 击 “ 表 单 ” 面 板 中 的 插入 文本 字段 的 网 标 按钮 号 ， 即 可 在 表单 中 添加 一 个 
文本 字段 。 

04 昌 选中 该 文本 字段 ， 在 属性 设置 面板 左 侧 的 “文本 域 ” 下 方 的 文本 框 中 键入 子 段 
的 名 称 “name”; 在 “和 尝 符 宽度 ”中 输入 20，“ 最 多 字符 数 ” 设 置 为 18; 在 “类 型 ” 单 选 
按钮 组 中 单 击 “ 单 行 ”， 在 “初始 值 ”文本 框 输入 “行云流水 ”。 

访 者 需要 注意 ，“ 了 字符 宽 度 ” 用 于 设置 文本 字段 的 字符 宽度 ， 而 “最 多 字符 数 ” 用 于 
设置 最 多 可 输入 的 子 符 数 ， 不 要 把 这 两 者 弄 泥 清 。 

“文本 域 ”用 于 设置 文本 字段 的 名 称 ， 该 名 称 可 以 被 脚本 或 程序 所 引用 ; “类 型 ”用 
于 设置 文本 字段 的 类 型 : “单行 ”用 于 输入 用 户 名 、 电 子 邮 件 等 单行 信息 ; “多 行 ” 用 于 
输入 留言 、 意 见 等 内 容 较 多 的 文本 ;“ 密码” 用 于 输入 密码 , 用 户 输入 的 所 有 文本 在 windows 
系统 下 会 被 墨色 的 点 蔡 换 显 示 。“ 初 始 值 ” 用 于 设置 没有 在 文本 字段 中 和 输入 任何 值 时 ， 该 
文本 域 中 的 认 显示 的 文本 。 

05 且 在 表单 中 按 Enter 键 后 ， 输 入 “密码 : ”， 并 单 击 “表单 ”面板 上 的 口 图 标 添 加 
第 二 个 文本 字段 。 然 后 在 属性 面板 中 设置 其 名 称 为 “pwd”，“ 孚 竺 宽度” 为 14，“ 最 多 
字符 数 ” 为 12，“ 关 型 ”为 “密码 ”，“ 初 始 值 ”为 “vanilla”。 

当 用 户 希 望 保护 目 己 的 输入 信息 不 被 他 人 看 到 时 , 束 可 以 使 用 密码 域 ,例如 , 当 在 ATM 
上 输入 时 ，PIN 号 人 码 是 隐藏 的 。 输 入 密码 域 中 的 信息 不 会 以 任何 方式 被 加 密 ， 并 且 当 友 送 
到 Web 省 理 者 手中 时 ， 它 会 以 常规 文本 的 形式 显示 。 

06 旧 在 表单 中 按 Enter 键 换行 ， 输 入 “ 目 我 介绍 : ”， 并 单 击 “ 表 单 ” 和 面板 上 的 品 图 
标 庄 加 第 三 个 文本 字段 。 然 后 在 属性 面板 中 设置 其 名 称 为 “info”, 一 字符 宽度 ”为 50， 
“ 行 数 ”为 5S， 即 最 多 能 输入 的 文本 行 数 为 和 行 ，“ 关 型 ”为 “多 行 ”“， “初始 值 ” 为 “个 
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19 DreaomWearer C06 中 文 及 入 门 己 粮 言 实例 者 下 


人 资料 说 明 ”， 如 图 9-5 所 示 。 


属性 
国 立 本 域 字符 宽度 世 ) 50 类 型 〇 单行 G) 。 名 多 行 灿 。 品 客 码 @) 类 (Cc) | 无 Ix| ® 
Et 行 数 初始 值 开 】 | 个 人 资料 说 明 ES 
口 禁 用 多) 
口 只 读 (RB) 


图 9-5 ”多 行文 本 子 段 的 属性 设置 面板 
07 在 表 千 中 按 Enter 键 换行， 输入 “个 人 风采 : ”， 并 执行 “插入 ”/“ 表 单 ”/“ 文 
件 域 ” 菜 单 命令 ， 或 直接 单 击 “ 表 单 ” 面 板 上 的 文件 域 按钮 图 添加 一 个 文件 域 。 然 后 在 属 
性 面板 中 设置 其 名 称 为 “photo”; “字符 宽度 ”为 30，“ 最 多 字符 数 ” 为 20。 如 网 9-6 所 
不 。 


尾 性 


文件 域名 称 字符 宽度 他) 30 类 [人 C) 无 v 
Ul : 


photo 最 多 字符 数 山 ) 20 


B® 


图 9-6 ”文件 域 的 属性 设置 面板 
有 时 候 ， 需 要 访问 者 提供 的 信息 过 于 复杂 ， 而 无 法 在 文本 域 中 达成 ， 如 经 过 排版 的 简 
历 、 图 形 文 件 或 其 它 文 件 。 这 种 情况 下 整 可 以 通过 在 网 页 中 加 入 文件 域 来 达到 这 个 目的 。 
0 细 你 存 文 档 。 按 下 快捷 键 F12 在 浏览 右 中 预 虎 整个 页 面 ， 如 网 9-7 所 示 。 


图 9-7 页面 效 末 


9.1.3 下 拉 菜 单 与 列表 


下 拉 菜 单 和 列表 都 能 够 给 浏览 者 以 列表 的 形式 提供 一 系列 的 预 设 选择 项 。 与 单 选 近 钮 
和 复 选 框 不 同 的 是 ， 下 拉 有 亲 蛙 和 列表 能 够 提供 多 个 可 选项 ， 这 对 于 美化 版 面 和 空间 有 限 的 
页 面 来 说 ， 是 非常 不 错 的 选择 。 

尽管 在 属性 面板 中 创建 下 拉 菜 和 单 和 滚动 列表 的 方式 是 一 样 的 ， 但 是 下 拉 肖 单 和 滚动 列 
表 却 所 供 了 不 同 的 功能 。 下 拉 沫 单 通过 下 拉 方 式 显 示 多 个 可 选项 ， 一 般 只 允许 选择 一 个 可 
选项 。 列表 通过 类 似 浏览 器 深 动 条 的 深 动 框 显示 多 个 可 选项 , 并 可 以 目 定义 滚动 框 的 行 高 ， 
允许 浏览 者 选择 一 个 或 多 个 可 选项 。 

一 般 而 言 ， 当 可 用 的 页 面 空间 非常 小 的 时 候 ， 使 用 下 拉 荣 单 ， 当 需要 控制 显示 的 选项 
数 时 ， 通 钊 使 用 滚动 列表 。 

下 面 省 示 在 表单 中 插入 下 拉 菜 单 和 该 动 列表 的 方法 。 

0 但 新 建 一 个 HIML 文 档 。 设 置 好 页 面 属 性 后 ， 执 行 “ 插 入 ”/“ 表 单 ”/“ 表 单 ” 命 

令 ， 或 者 单 击 “ 表 单 ” 面 板 中 的 “表单 ”按钮 图 ， 在 文档 中 插入 一 个 表单 。 
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02 在 页 面 中 输入 “您 经 党 使 用 Adobe 的 哪些 谋 品 : ”， 然 后 执行 “插入 ”/“ 表 单 ” 
/“ 列 表 / 菜 单 ” 命 令 ， 或 直接 单 击 “表单 ”面板 中 的 “列表 /菜单 ”按钮 遇 ， 在 表单 中 插入 
一 个 “列表 /菜单 ”对 和 象 。 

03 选中 插入 的 “列表 / 采 蛙 ”对 象 ， 在 属性 面板 中 设置 其 名 称 为 “product”，“ 类 
型 ”为 “列表 ”; “ 蜗 度 ”为 3， 且 “允许 多 选 ”。 

04) 单 击 “ 列 表 值 ”按钮 打开 “列表 值 ” 对 话 框 编辑 列表 项 目 。 在 “项 目标 签 ” 下 
单 击 鼠标 ， 当 文本 杠 变 为 可 编辑 状态 时 ， 和 输入 需要 的 列表 项 ， 访 项 将 显示 在 列表 框 中 。 然 
后 单 击 “ 值 ”下 面 的 文本 框 ， 输 入 该 列表 项 目 对 应 的 值 。 

05 有 单 击 对 话 框 顶部 的 此 按钮 添加 其 他 四 个 项 目 ，“ 项 目标 签 ” 分 别 为 : Adobe 
Dreamweaver、Adobe Fireworks、Adobe Flash 和 Adobe Reader， 并 输入 其 对 应 的 值 。 单 击 
“确定 ”完成 列表 值 设 置 。 

06 单 击 “确定 “按钮 返回 到 列表 的 属性 面板 ， 在 “初始 化 时 选 定 ”列表 框 中 选择 
“Adobe Photoshop”。 

“列表 /菜单 ”: 设置 “列表 / 沙 单 ”的 名 称 。 访 名 称 可 以 被 脚本 或 程序 引用 。 

“类 型 ”: 指定 该 对 象 是 下 拉 染 单 ， 还 是 显示 一 个 列 有 项 目的 可 滚动 列表 。 

“局 上 度 ”: 用 于 议 置 列表 显示 的 行 数 。 

“人 允许 多 选 ”: 用 于 设置 是 否 允 许 选 多 项 列表 值 。 

“列表 值 ”: 用 于 设置 列表 内 容 。 在 这 个 对 话 框 中 可 以 添加 或 修改 “列表 /来 单 ” 的 项 


“类 ”; 用 于 设置 应 用 于 “列表 /订单 ”的 CSS 样式 。 
“初始 化 时 选 定 ”: 用 于 设置 “列表 /订单 ”的 默认 选项 。 
07 贞 投 照 上 面 的 方法 ， 在 页 面 中 插入 一 个 下 拉 表 单 ， 即 插入 “列表 / 荣 单 ”对 象 后 ， 
在 属性 面板 中 将 “ 关 型 ”设置 为 “ 荣 单 ”。 并 设置 其 列表 值 ， 如 图 9-8 所 示 。 
08 单 击 “ 和 确定” 按钮 返回 到 沫 单 的 属性 面板 ， 在 “初始 化 时 选 定 ”列表 框 中 选择 
“ Microsoft FrontPage” 。 


09 保存 文档 。 按 下 F12 键 在 浏览 器 中 预 筑 效果 ， 如 图 9-9 所 示 。 


Adobe Fireworks Por 
GD 
您 经 常 使 用 Adobe 的 哪些 产品 ， oe 


请 选择 一 个 最 喜欢 的 产品 :| Microsoft FrontPage 此 
hicrosoft FrontPadge 


allalre Homesite > 


图 9-8 ”下 拉 有 末 单 的 “列表 值 ” 对 话 框 图 9-9 ”列表 /订单 的 预 多 效 来 


在 列表 中 ， 按 下 Shift 或 Cul 键 ， 即 可 进行 多 选 。 如 果 要 俘 看 其 他 列表 项 ， 可 以 拖 动 列 
表 右 侧 的 滚动 条 。 单 击 下 拉 沫 单 右 侧 的 箭头 ， 即 可 得 看 所 有 的 列表 项 。 


9.1.4 跳 转 菜单 


在 实际 的 网 站 建设 过 程 中 ， 通 常 需要 在 一 些 网 页 上 做 站 点 跳 转 的 效果 ， 这 利用 跳 转 菜 
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19 DreamWearerlCs6 中 文 豚 入 门 刁 拉 高 实 例 条 有 


单 可 以 轻松 实现 。 跳 转 某 单 的 静态 外 观 关 似 于 下 搁 染 单 ， 但 它们 的 本 质 功能 却 是 完全 不 同 
的 。 跳 转 荣 单一 般 用 于 选择 一 个 网 页 地 址 ， 浏 览 器 将 会 自动 跳 转 到 指定 的 页 面 。 这 项 功能 
特别 适合 于 友情 链接 、 导 航 系统 等 。 
下 面 演示 在 文档 中 插入 跳 转 荣 单 的 具体 操作 。 

019 新 建 一 个 HTML 文档 。 执 行 “ 插 入 ”/“ 表 单 ”/“ 表 单 ” 命 令 ， 或 者 单 击 插入 栏 
中 表单 面板 的 “表单 ”按钮 图 ， 在 页 面 中 插入 一 个 表单 。 

025 执行 “插入 ”/“ 表 单 ”/“ 跳 转 荣 单 ” 命 令 ， 或 单 击 “ 表 单 ” 搬 入 面板 上 的 插入 
跳 转 菜单 按钮 加， 打开 图 9-10 所 示 的 “插入 跳 转 菜单 ”对 话 框 。 


选择 时 ， 转 到 URL: 训 览 ... 


打开 URL 于 : | 主 窗口 v 
菜单 ID: |jumplerm 
选项 ，[] 菜单 之 后 插入 前 往 按 钮 
记 更 改 VRL 后 选择 第 一 个 项 目 


图 9-10 “插入 跳 转 荣 单 ”对 话 框 〈1) 


03 肯 “ 沫 单 项 ”列表 框 中 显示 已 有 或 默认 的 荣 单 项 名 称 《〈 例 如 项 目 1) ， 该 名 称 可 以 
被 脚本 或 程序 所 引用 。 在 “文本 ”文本 框 中 键入 亲 单 项 的 名 称 ， 访 名称 将 显示 在 跳 转 订单 
中 。 本 例 输 入 “Microsoft”。 
04 在 “选择 时 ， 转 到 URL” 文 本 框 中 键入 末 单 项 链接 的 目标 ， 或 单 击 “ 浏 览 ” 按 
钮 找到 需要 链接 的 文件 。 本 例 输入 “http://www.microsoft.com.cn”。 
05 在 “打开 URL 于 ”下 拉 闵 单 中 设置 打开 链接 目标 的 位 置 。 本 例 使 用 默认 设置 。 
06 在 “ 末 单 ID” 文 本 框 中 设置 跳 转 采 蛙 的 名 称 。 本 例 使 用 默认 设置 。 
07 用 选中 “及 单 之 后 插入 前 往 按钮 ” 复 选 框 ， 即 在 玉 单 后面 添加 “前 往 ” 按 钮 。 
读者 要 注意 的 是 ， 在 跳 转 下 拉 采 时 中 选择 第 1 个 选项 时 ， 无 法 立即 跳 转 到 指定 的 URL， 
这 个 “前 往 ” 按 钮 焉 是 要 激活 这 个 功能 。 当 在 跳 转 荣 单 中 选择 第 1 个 选项 时 ， 然 后 单 击 该 
按钮 即 可 跳 转 到 指定 的 URL。 
08 旧 “和 更改 URL 后 选择 第 一 个 项 目 ” 用 于 设置 当 URL 改 变 后 是 否 选择 第 一 个 菜单 项 。 
本 例 不 选中 此 复 选 框 。 
09 间 单 击 “菜单 项 ”列表 顶部 的 土 胺 钮 ， 然 后 按照 本 例 第 (3) 到 第 (8) 的 方法 ， 
设置 其 他 这 单项 。 
如 果 不 需 要 某 项 ， 可 以 选中 该 项 后 ， 单 击 二 删除 。 单 击 二 |、 荆 过 钮 ， 可 以 向 上 或 向 
下 调整 菜单 项 的 位 置 。 编 辑 完成 后 的 “插入 跳 转 菜单 ”对 话 框 如 网 9-11 上 所 示 。 
10 单 击 “ 人 确定” 按钮 关闭 对 话 框 ， 即 可 在 表单 中 插入 一 个 跳 转 订单 ， 如 图 9-12 所 


sh 


小 。 


11 贞 单 击 页 面 中 插入 的 跳 转 菜单 ， 在 属性 面板 中 指定 类 型 为 “ 沫 单 ”， 初 始 化 时 选 


定 “Microsoft” 。 
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12 肌 单 击 “有 前往” 按钮 ， 指 定 3 败 及 无 ”。 
13 旨 在 “按钮 名 称 ” 中 设置 “前 往 二 按钮 的 名 称 ， 访 名称 可 以 被 脚本 或 程序 所 引用 。 
本 例 使 用 默认 设置 。 


阐 本 : Macromedia 


选择 时 ， 转 到 URL: http: /A ww. macromedia. con | 


打开 WEL 于 : | 主 窗口 v 
药 单 ID: | jumpJteru | 
选项 : 菜单 之 后 插入 前 往 按钮 
癌 更 改 VRL 后 选择 第 一 个 项 目 


图 9-11 “插入 跳 转 荣 单 ”对 话 框 (2) 


图 9-12 插入 的 跳 转 菜单 


14 月 在 “ 值 ” 文本 框 中 输入 按钮 的 标签 。 本 例 输 入 GO， 该 名 称 将 显示 在 按钮 上 。 

15 在 “动作 ” 单 选 按钮 组 中 选择 按钮 的 类 型 。 本 例 选 择 “ 无 ”按钮 。 有 关 按 钮 的 
介绍 将 在 本 章 9.1.6 节 中 进行 讲解 。 

16 你 存 文档 ， 人 至 此 文档 创建 完毕 。 按 下 快捷 键 F12 即 可 在 浏览 右 中 预览 整个 页 面 。 
效果 如 图 9-13 所 示 。 


友情 链接 ， [Mierosof ” 屿 [50 
图 9-13 ”预览 跳 转 荣 单 的 效果 


在 跳 转 荣 单 中 选择 一 个 荣 单 项 ， 然 后 单 击 GO 按钮 ， 即 可 以 在 指定 的 窗口 中 打开 链接 
的 地 址 。 


9.1.5 单 选 按钮 与 复 选 框 


在 表单 中 使 用 单 选 框 和 复 选 框 可 以 设 年 预定 义 的 选项 。 访问 者 可 以 通过 扣 击 单 选 框 或 
复 选 框 来 选择 预 置 的 选项 。 

单 选 框 和 复 选 框 的 区 别 在 于 它们 的 运作 方式 不 同 。 每 个 复 选 框 都 是 独立 的 ， 点 击 选 中 
只 是 在 切换 单个 选项 的 选中 与 否 ， 因 此 可 以 选中 多 个 选项 。 而 单 选 征 所 有 的 符 选 项 是 一 个 
整体 ， 对 于 选项 的 选择 具有 独占 性 ， 也 就 是 说 ， 在 单 选 框 的 竺 选项 中 ， 只 允许 有 一 个 选项 
处 于 被 选中 状态 。 

下 面 演示 单 选 按钮 和 复 选 框 的 使 用 方法 。 

0 外 继续 上 例 ， 将 光标 放置 于 “性 别 ” 单 元 格 后 一 个 单元 格 ， 单 击 “ 搬入” 栏 “ 表 
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单 ” 和 面板 中 的 国 按 钮 ， 添 加 一 个 单 选 框 ， 在 此 单 选 框 后 刍 入 文本 “ 男 ”。 

02 在 属性 面板 中 为 狐 添 加 的 单 选 框 对 象 命 名 “gender”， 设 置 选 定 值 为 “0”， 初 
始 状 态 为 “未 选中 ”。 

“ 单 选 按钮 ”: 用 于 设置 单 选 按钮 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 

“ 选 定 值 ”: 用 于 设置 该 单 选 按钮 被 选中 时 的 值 ， 这 个 值 将 会 随 表单 一 起 提交 。 

“初始 状态 ”: 用 于 设置 单 选 按 钮 的 初始 状态 。 同 一 组 单 选 按钮 中 只 能 有 一 个 按钮 的 
初始 状态 是 选中 的 。 

“类 ”: 用 于 设置 应 用 于 单 选 框 域 的 CSS 样式 。 

03 同 理 ， 再 添加 同名 为 “gender” 的 单 选 枉 ， 改 变 选 定 值 为 “1”， 并 在 单 选 框 后 
键入 文本 “ 女 ”。 此 时 结果 如 图 9-14 所 示 。 


性 别 ， 口 男 富 玄 


图 9-14 插入 的 单 选 按钮 


\ 注意 : 


2。 由 于 单 选 按钮 是 以 组 为 单位 的 ， 因 此 所 有 的 单 选 按钮 都 必须 拥有 同一 个 名 
称 ， 并 且 其 值 均 不 能 相同 。 


如 末 页 面 中 茶 个 选项 需要 诬 加 的 单 选 按钮 很 多 ， 如 采 一 个 一 个 地 添加 单 选 近 钮 ， 然 后 
再 一 个 一 个 地 改 和 名， 实现 起 来 特别 索 珊 。 使 用 “ 单 选 按钮 组 ” 则 可 以 一 次 建立 一 组 单 选 按 
和 


04 9 单 击 “ 单 选 按钮 组 ”按钮 四 ， 打 开 图 9-15 所 示 的 “ 单 选 按 钮 组 ”对 话 框 。 


布局 , 使 用 : @) 换行 符 ( <br> 标签) 
时 3 


图 9-15 “ 单 选 按钮 组 ”对 话 框 〈1) 


05 朋 在 “名 称 ” 文 本 框 中 定义 单 选 按钮 组 的 名 称 。 本 例 使 用 默认 设置 。 

06 肯 在 “ 单 选 按钮 ”列表 框 中 定义 单 选 按钮 组 的 单 选 按钮 的 个 数 ， 以 及 代表 的 值 。 
单 击 “ 标 签 ” 列 下 的 “ 单 选 ”， 该 文本 框 即 变 为 可 编辑 状态 ， 输 入 要 在 页 面 上 显示 的 单 选 
按钮 的 标签 。 单 击 “ 值 ” 下面 的 “ 单 选 ”， 然 后 设置 该 单 选 按钮 被 选中 时 的 值 。 

07 单 击 列表 框 左 上 角 的 二 和 二 按钮 可 以 添加 和 减少 单 选 按钮 的 数目 。 

0 四 单 击 列表 框 右上 角 的 二 | 和 二 | 按钮 可 以 调整 当前 选中 的 单 选 按钮 在 单 选 按钮 组 
中 的 位 置 。 

09 贞 在 “布局 ， 使 用 ”区 域 设 置 单 选 按钮 组 中 的 各 个 单 选 按钮 的 分 隔 方式 。 本 例 选 
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择 “ 表 格 ”。 此 时 的 对 话 框 如 图 9-16 所 示 。 


名 称 : Radiocroupl | 


单 选 按钮 : 十 | [二 ] 和 | | 了 | 


图 9-16 “ 单 选 按 钮 组 ”对 话 框 (2) 
插入 的 里 选 按钮 组 的 各 个 单 选 按钮 是 上 下 排列 的 ， 用 户 可 以 通过 <br> 标记 分 开 ， 也 
可 以 选择 通过 表格 的 单元 格 来 界定 。 
10 几 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 并 在 页 面 中 插入 单 选 按钮 组 ， 如 图 9-17 上 所 示 。 


图 9-17 插入 的 单 选 按钮 组 


11 贞 选中 单 选 按钮 组 ， 在 属性 面板 中 可 以 设置 各 个 单 选 按钮 初始 时 是 人 否 选中 。 

12 旧 执行 “插入 ”/“ 表 单 ”/“ 复 选 框 ” 沫 单 命令 ， 或 单 击 “ 表 单 ” 插 入 面板 中 的 复 
选 框图 标 按钮 畔 ， 即 可 向 表单 中 添加 一 个 复 选 按钮 ， 然 后 在 其 后 输入 “Photoshop”。 

13 昌 重复 步骤 由 12 上 ， 再 插入 三 个 复 选 枉 ， 如 网 9-18 所 示 。 


下 面 哪些 软件 是 8&dobe 公 司 的 严 品 ; 


Photoshor LTrEatnwrearET 上 FrontEage Flash 


图 9-18 ”插入 的 复 选 框 效果 


14 目 选中 任 一 个 复 选 按钮 ， 在 属性 面板 中 设置 其 名 称 和 初始 状态 。 
“ 复 选 框 名 称 ”: 用 于 设置 复 选 框 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 


vy 注意 : 

2 与 单 选 按钮 不 同 ， 由 于 每 一 个 复 选 框 都 是 独立 的 ， 因 此 应 为 每 个 复 选 框 设 
置 唯一 的 名 称 ， 

“ 选 定 值 ”: 用 于 设置 该 复 选 框 被 选中 时 的 值 ， 这 个 值 将 会 随 表单 提交 。 


15 骨 文档 创建 完毕 , 保存 文档 。 按 下 快捷 键 F12 即 可 在 浏览 器 中 预览 整个 页 面 的 效果 ， 
如 图 9-19 所 示 。 
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图 9-19 ”预览 页 面 效 来 


9.1.6 按钮 


按钮 对 于 HTML 表 单 来 说 ， 是 必 不 可 少 的 ， 表 单 中 的 按钮 对 象 是 用 于 触发 服务 器 端 脚 
本 处 理 程序 的 工具 。 只 有 单 击 了 “提交 ”按钮 ， 放 置 在 表单 中 的 所 有 表单 对 象 及 表单 才 可 
以 提交 到 服务 器 ， 从 而 在 客户 端 与 服务 器 端 之 间 产 生 交 互 作用 。 

下 面 演示 在 文档 中 插入 按钮 的 具体 操作 。 

01 继续 上 例 。 执 行 “ 插 入 ”/“ 表 单 ”/“ 按 钮 ”菜单 命令 ， 或 单 击 “ 表 单 ”插入 面 
板 的 按钮 图 标 回 ， 在 表单 中 插入 两 个 按钮 。 

0 引 选中 第 一 个 按钮 ， 在 属性 面板 的 “按钮 名 称 ” 文 本 框 中 输入 按钮 的 名 称 ， 该 名 
称 可 以 被 脚本 或 程序 所 引用 且 唯 一 。 本 例 输入 submit。 

03]) 在 “ 值 ” 文 本 框 中 设置 按钮 的 标识 ， 该 标识 将 显示 在 按钮 上 。 本 例 使 用 默认 设 

04] 在 “动作 ” 单 选 按钮 组 中 选中 “提交 表单 ”。 

HTML 提供 了 三 种 基本 类 型 的 按钮 : 提交 、 重 置 、 无 。 其 中 , “提交 ”按钮 会 使 用 POST 
方法 将 表单 提交 给 指定 的 动作 进一步 处 理 ， 通 常 是 服务 器 端 程 序 的 URL 或 者 一 个 mailto 地 
址 ，“ 重 置 ”按钮 会 清除 表单 中 所 有 的 域 ， 以 便 重新 输入 表单 数据 ， “无 ”按钮 通常 用 于 
执行 一 些 脚本 操作 。 

05 “类 ”用 于 设置 应 用 于 按钮 上 文字 的 CSS 样 式 。 本 例 使 用 默认 设置 。 

06]】 同 理 ， 在 属性 面板 中 设置 第 二 个 按钮 的 名 称 为 reset; “ 值 ”为 “ 重 填 ”; “ 动 
作 ” 为 “ 重 设 表单 ”。 

07 保存 文档 。 按 下 快捷 键 F12 在 浏览 器 中 预览 整个 页 面 。 效 果 如 图 9-20 所 示 。 


下 面 哪些 软件 是 Adste 呈 司 的 产品 ， 


Photashop Leermeneearer 
计算 机 的 胡 于 堵 特 为 。 

A。 运 芋 嚣 . 控 盾 喷 和 存在 器 

BB， 回 件 系 娆 和 加 件 界 娃 

己 。 主 灿 与 内 区 设 备 

DP， 和 流 软件 和 度 用 园 忻 


对 谱 


点 情 捕 探 ， FT 嘱 EU 


图 9-20 ”插入 的 按钮 效果 
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9. 1.7 图 像 域 


在 表单 中 ， 通 常 使 用 “提交 ”按钮 来 提交 表单 。 事 实 上 “图 像 域 ”可 以 替代 “提交 ” 
按钮 来 执行 将 表单 数据 提交 给 服务 器 端 程序 的 功能 ， 而 且 使 用 图 像 域 可 以 使 文档 更 为 美 
观 。 

下 面 通 过 演示 在 文档 中 插入 图 像 域 的 具体 操作 ， 以 及 利用 图 标 代替 提交 按钮 的 技术 。 

0 让 新建 一 个 HTML 文档 。 执 行 “插入 ”/“ 表 单 ”/“ 表 单 ” 菜 单 命令 ， 或 者 单 击 “ 表 
单 ” 面板 上 的 “表单 ”按钮 名， 在 页 面 中 插入 一 张 表单 。 

02 将 光标 定位 在 表单 内 执行 “插入 ”/“ 表 格 ” 菜 单 命令 插入 一 个 三 行 两 列 的 表格 。 

03 有 在 表格 第 一 行 一 列 中 输入 文本 “Name: ”， 然 后 在 第 一 行 第 二 列 的 单元 格 中 插 
入 一 个 文本 域 ， 并 在 属性 面板 中 设置 其 类 型 为 “单行 ”。 

04 同 理 ， 在 表格 的 第 二 行 插入 文本 “Tel: ”和 文本 域 。 

05 有 选中 表格 第 三 行 的 两 个 单元 格 ， 执 行 “ 修 改 ”/“ 表 格 ”/“ 合 并 单元 格 ” 命 令 ， 
将 选中 的 单元 格 合并 为 一 个 单元 格 。 

06 有 将 光标 定位 于 表格 第 三 行 的 单元 格 内 ， 执 行 “ 插 入 ”/“ 表 单 ”/“ 图 像 域 ”菜单 
命令 ， 或 单 击 “ 表 单 ” 面板 上 的 图 像 域 按钮 图 。 

07 在 弹出 的 “选择 图 像 源 ”对 话 框 中 选择 一 个 需要 的 图 像 文件 , 然后 单 击 “ 确 定 ”。 

08 有 保存 文档 ， 并 按 F12 键 预览 页 面 。 用 户 将 发 现 单 击 图 像 后 页 面 没 有 变化 ， 并 没有 
提交 表格 。 继 续 下 面 的 步骤 。 

09】 单 击 文档 窗口 上 的 | 拆 分 | 按钮， 切换 到 代码 和 设计 视图 。 在 “设计 ”视图 中 单 击 
图 像 域 ，“ 代 码 ” 视 图 中 相应 的 代码 变 为 黑色 突出 显示 。 

10 在 图 像 域 代 人 码 末 尾 加 上 “value=Submit”， 这 时 图 像 域 代 人 码 成 为 :<input 


name= lmageField” type="image” src="malil.gif” width="23” height="16" border="0" 


value="Submit">。 
11 在 “设计 ”视图 中 选中 图 像 域 ， 在 对 应 的 属性 和 面板 中 进一步 设置 图 像 域 的 属性 。 
“图 像 区 域 ”: 用 于 设置 图 像 域 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 
“ 源 文件 ”: 用 于 设置 图 像 的 URL 地址。 
“对 齐 ”: 用 于 选择 图 像 在 文档 中 的 对 齐 方式 。 


66 99 "Ed yy M2 va A HO S| ntitle oCcumnent 一 看 . .. x 
巷 换 ”， 用 于 设置 图 像 的 替换 文字 ， 当 浏览 器 不 显 ”Ps 2 Ee] 


交 件 企 】 编辑 于) 查看 人) 链接 个 
从 


示 图 像 时 ， 会 用 输入 的 文字 蔡 换 图 像 。 

“编辑 图 像 ”: 局 动 默 认 的 图 像 编 辑 器 ， 并 打开 该 图 
像 文件 进行 编辑 。 

12 肌 保存 文档 。 人 至 此 ， 文 档 创建 完毕 。 可 以 按 下 快 
捷 键 F12 在 浏览 器 中 预览 整个 页 面 ， 如 图 9-21 所 示 。 当 单 
击 图 像 时 吏 会 路 转 到 表单 处 理 页 面 。 图 9-21 ”实例 效果 


9. 1.8 隐藏 域 
将 信息 从 表单 传送 到 服务 器 处 理 时 ,编程 者 第 弟 需 要 发 送 一 些 访 问 者 不 应 该 看 到 的 数 
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征 测 于 了 
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据 ， 例 如 服务 器 端 脚本 程序 需要 的 变量 ， 此 时 隐藏 域 对 于 编程 者 而 言 极 其 有 用 。 

“隐藏 域 ” 是 一 种 在 浏览 器 十 不 显示 的 表单 对 象 ， 利 用 “隐藏 域 ” 可 以 实现 浏览 器 同 
服务 器 在 后 台 隐 藏 地 交换 信息 。“ 隐 藏 域 ” 可 以 为 表单 处 
理 程序 提供 一 些 有 用 的 参数 , 而 这 些 参 数 是 用 户 不 关心 的 ，“| 男 titieti Gmm)*+  - 口 X 
不 必 在 浏览 器 中 显示 。 -| 隐藏 域 占 位 符 

在 文档 中 插入 “ 隐 震 域 ”应 执行 以 下 步骤 : 

(1) 执行 “插入 ”/“ 表 单 ”/“ 表 单 ” 命 令 ， 或 者 单 
击 插入 栏 中 表单 面板 的 号 按钮 ， 添 加 表单 。 

(2) 将 光标 置 于 表单 中 , 执行 “插入 ”/“ 表 单 ”/“ 隐 |apoays donornly hy 
藏 域 ”来 蛙 命 令 ， 或 早 击 “ 表 蛙 ”插入 面板 上 的 隐藏 域 图 
标 圈 插入 隐藏 域 , 完成 后 设计 视图 插入 一 个 标记 , 如 图 9-22 图 9-22 ”插入 隐藏 域 的 效果 
所 示 。 

(3) 在 属性 设置 面板 中 设置 隐藏 域 的 参数 值 。 

“隐藏 区域 ”: 用 于 设置 隐藏 域 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 

“ 值 ”: 用 于 设置 隐藏 域 的 参数 值 。 该 值 将 在 提交 表单 时 传递 给 服务 器 。 


9.2 使 用 Spry 表 单 验 证 控件 


在 Dreamweaver CS6 中 ，Adobe 预制 了 一 系列 表单 验证 构件 (validation widgets) ， 例 
如 ，Spry 验证 文本 域 、Spry 验证 文本 区 域 、Spry 验证 密码 、Spry 验证 确认 、Spry 验证 选 
择 、Spry 验证 复 选 框 和 Spry 验证 单 选 按钮 组 等 ， 可 以 帮助 用 户 更 加 轻松 快捷 地 验证 表单 
数据 、 构 建 AJAX 页 面 。 
Adobe 公 司 的 AJAX 框 架 Spry 能 与 Dreamweaver 无 颖 地 整合 ， 设 计 的 守旧 了 驶 是 标记 尽量 
向 单 ，Javascript 的 使 用 尽量 少 ， 直 接 用 拖拉 的 方式 完成 程序 代码 的 编写 。 
下 面 通过 一 个 简单 实例 介绍 Spry 表单 验证 构件 的 使 用 方法 。 本 例 操作 如 下 : 
01) 新 建 一 个 HTML 文档 ， 并 插入 一 张 表单 。 
02 将 光标 置 于 表单 中 ， 输 入 文本 “邮箱 : ”之 后 ， 单 击 表 单 面 板 上 的 “Spry 验证 
文本 域 ” 图 标 ， 插 入 相应 的 构件 。 
03 选中 该 表单 元 素 ， 在 属性 面板 中 的 “类 型 ”下 拉 列 表 中 为 验证 文本 域 构件 指定 
验证 类 型 。 本 例 选择 “电子 邮件 地 址 ”。 
Spry 验证 文本 域 与 文本 域 相 似 ， 不 同 的 是 ， 网 页 设计 者 不 需要 为 Spry 验证 文本 域 编 
写 验 证 代码 ， 只 要 在 属性 和 面板 中 设置 好 其 类 型 、 格 式 、 预 筑 状 态 和 验证 的 事件 ， 即 可 目 动 
验证 用 户 输 入 的 数据 是 人 否 合 法 。 
大 多 数 验 证 类 型 都 会 要 求 输入 的 内 容 采 用 标准 格式 。 例 如 ， 如 果 对 Spry 文本 域 应 用 
整数 验证 类 型 ， 则 在 该 文本 域 中 只 能 输入 整数 ， 盏 则 将 无 法 通过 验证 。 
04 骨 在 “预览 状态 ”下 拉 列 表 中 选择 表单 中 构件 的 显示 状态 。 本 例 选 择 “ 必 填 ”。 
05 在 “验证 于 ”后 面 的 复 选 框 中 指定 验证 文本 域 的 时 机 , 例如 当 访 问 者 在 构件 外 部 
单 击 时 、 键入 内 容 时 或 尝试 提交 表单 时 。 可 以 选择 所 有 的 选项 ， 也 可 以 一 个 都 不 选 。 其 中 ， 
OnBlur: 当 用 户 在 文本 域 的 外 部 单 击 时 验证 ; OnChange: 当 用 户 更 改 文本 域 中 的 文本 时 验 
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证 ; OnSubmit: 当 用 户 尝 试 提 交 表 单 时 验证 。 
06 按照 上 面 的 方法 插入 spry 验证 复 选 框 构件 、spry 验证 文本 区 域 构件 和 spry 验证 
选择 构件 ， 以 及 两 个 按钮 ， 此 时 的 页 面 布局 如 图 9-23 所 示 : 


教育 程度 [学 国 
兴趣 爱好 ， 口 簿 球 口 游泳 口 足球 口 滑冰 口 登 册 


个 人 说 明 ， v 


图 9-23 页 面 布 局 


07 选中 spry 验证 选择 构件 ， 在 属性 面板 中 设置 名 称 为 “degree”， 不 允许 空 值 。 
Spry 验证 选择 构件 与 列表 / 亲 单 相似 ， 是 一 个 下 拉 末 单 。 其 中 “焦点 状态 ”表示 当 用 
户 单 击 该 选择 构件 时 的 状态 。 
为 Spry 选择 构件 添加 吏 单项 的 有 天 操作 与 列表 / 沫 单项 的 操作 类似 ， 旋 者 可 以 参见 本 
草 9.1.3 节 相 关 的 介绍 
默认 情况 下 ， 用 Dreamweaver 插入 的 所 有 验证 选择 构件 都 要 求 用 户 在 将 构件 发 布 到 
Web 页 之 有 前， 选择 具有 相关 值 的 来 单项 。 但 是 也 可 以 茶 用 此 选项 ， 即 取消 选择 “不 人 允许 
宇 值 ”选项 。 
如 末 选 中 了 “无 效 值 ”， 且 在 其 后 的 文本 框 中 指定 了 无 效 值 ， 则 当 用 户 选择 与 该 值 相 
关 的 这 单项 时 ， 该 值 将 注册 为 无 效 。 人 例如， 如果 指定 -1 是 无 效 值 并 将 该 值 赋 给 某 个 选项 标 
和 俭 ， 则 当 用 户 选 择 该 染 单 项 时 ， 访 构件 将 返回 一 条 错误 消 县 。 
08 选中 spry 验证 复 选 框 构件 ， 在 属性 面板 中 指定 选择 艺 围 ， 选 择 “ 实 施 范围 《多 
个 ) ”， 并 输入 希望 用 户 选择 的 最 小 复 选 框 数 或 /和 最 大 复 选 框 数 。 
Spry 验证 复 选 框 构件 是 HTML 表单 中 的 一 个 或 一 组 复 选 框 。 如 本 例 中 表单 要 求 用 户 
至 少 选择 一 项 ， 但 不 能 多 于 两 项 。 如 琳 用户 没有 进行 选择 ， 或 选择 的 项 多 于 两 项 ， 则 该 构 
件 会 目 动 返回 一 条 消息 ， 声 明 不 符合 最 小 选择 数 或 最 大 选择 数 要 求 。 
“实施 范围 用 于 设置 构件 在 “设计 ”视图 中 的 显示 状态 。 
09 选中 spry 验证 文本 区 域 构 件 ， 在 属性 面板 中 设置 其 “最 小 字符 数 ” 为 5，“ 最 
大 字符 数 ” 为 S0， 无 计数 器 ， 荣 止 额 外 字符 ，“ 提 示 ” 文 本 为 “欢迎 光临 ! ”。 预 览 状 态 
为 “有 效 ” 
Spry 验证 文本 区 域 构 件 是 一 个 文本 区 域 ， 该 区 域 在 用 户 输入 文本 时 显示 文本 的 状态 
有 效 或 无 效 。 如 果 文 本 区 域 是 必 填 域 ， 而 用 户 没 有 输入 任何 文本 ， 该 构件 将 返回 一 条 消息 
声明 必须 输入 值 。 
“最 小 字符 数 ” 和 “最 大 字符 数 ” 用 于 限制 验证 文本 区 域 能 输入 的 字符 的 下 限 和 上 限 。 


区 注意 : 


2 只 有 设置 了 “最 大 字符 数 ”， 才 能 使 用 “其 余 字 符 ” 计 数 器 。 
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性 闪 亚 加 


3) “DreamweareriCe56 中 文 及 入 门 与 提高 实例 者 有 有 


“计数 器 ”用 于 显示 用 户 在 文本 区 域 中 已 经 输 六 了 多 少 字符 或 者 还 剩 多 少 字 符 。 默 认 
情况 下 ， 添 加 的 字符 计数 器 会 出 现在 构件 右 下 角 * 一 字符 计数 ”用 于 计算 已 输入 的 字符 数 ; 
“其 余 字 符 ” 用 于 计算 还 可 以 输入 的 字符 数 。 
“ 禁 上 上 额外 字符 ” 复 选 框 与 “最 大 学 符 数 ”类 似 ， 用 于 防止 用 户 在 验证 文本 区 域 构 
件 中 输入 的 文本 超过 所 人 允许 的 最 大 字符 数 。 
“提示 ”用 于 同文 本 区 域 中 添加 提示 信息 ， 以 便 让 用 户 知 道 应 当 在 文本 区 域 中 输入 哪 
种 信息 。 当 用 户 在 浏览 器 中 加 载 页 面 时 ， 文 本 区 域 中 将 显示 添加 的 提示 文本 。 
接 下 来 在 表单 中 添加 Spry 验证 密码 和 Spry 验证 确认 构件 ， 分 别 用 于 验证 输入 的 密码 
是 否 正确 ， 以 及 两 次 输入 的 密 人 码 是 否 一 致 。 
10 在 “邮箱 : ”下 一 行 输入 “登录 密码 : ”， 然 后 插入 一 个 Spry 验证 密码 控件 。 
119 选中 该 控件 ， 在 图 9-24 所 示 的 属性 面板 上 设置 密码 中 学 符 、 学 母 、 数 学 、 大 写 
学 母 以 及 特殊 字符 的 个 数 范 围 。 
属性 | 


1 到 密码 回 必 填 ”最 小 守 符 数 预览 状态 
ee 最 大 宇 符 数 验证 时 间 日 。 人 z 
自 定 包 此 构件 最 小 字母 数 最 小 数 宇 数 最 小 大 写 宇 母 涩 最 小 特殊 宇 符 数 

基 太 字 匡 类 扩大 数字 数 最 枯 太 写字 母 小 最 枯 特 殊 字 和 罕 沼 


图 9-24 ”设置 Spry 验 证 密码 控件 的 属性 


若 上 述 任 一 选项 保留 为 宇 ， 构 件 将 不 验证 用 户 输 入 的 密码 是 否 满足 该 条 件 。 例 如 ， 如 
条 最 小 /最 大 数字 数 选项 保留 为 空 ， 构 件 将 不 查找 密码 字符 串 中 的 数字 。 
12 有 为 起 一 行 ， 输入 “确认 登录 密码 ， ”， 并 在 其 右 侧 插入 一 个 Spry 验证 确认 控件 。 
选中 该 控件 ， 在 图 9-25 所 示 的 属性 面板 上 设置 该 控件 的 验证 参照 对 象 。 
分 配 了 唯一 ID 的 所 有 文本 域 都 显示 为 “验证 参照 对 象 ” 下 拉 列 表 中 的 选项 。 如 果 用 
户 在 该 控件 中 键入 的 密码 与 他 们 之 前 指定 的 密码 不 一 人 尾 ， 构 件 将 返回 错误 消 忆 。 
征 这 有 一步 中 ， A ni 则 可 以 验证 电子 邮件 地 址 。 
13 9 再 男 起 一 行 ， 输 入 “邮件 列表 视图 : ”， 然 后 插入 一 个 Spry 验 证 单 选 按钮 组 控 
件 。 在 弹出 的 对 话 框 中 设置 单 选 按钮 组 的 标签 和 值 ， 如 图 9-26 所 示 。 


性 [一 一 


预览 状态 | 初始 四 多 
EM spryconfirml 验证 参照 对 象 “password1” 在 表单 “fc|Y] 验证 时 间 口 onBlwr 口 onChange “onsubnit 加 
自 定 外 此 构件 


图 9-25 ”设置 Spry 验 证 确认 控件 的 属性 


Spry 验证 单 选 按钮 组 


名 称 RadioGroupl 
j rl 一 取消 
标签 在 本 
普通 模式 0 
分 组 模式 1 
会 话 模 式 2 


ooeen 


图 9-26 设置 Spry 验 证 单 选 按钮 组 
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14 9 蛙 击 “确定 ”按钮 关闭 对 话 框 之 后 ， 在 属性 面板 上 指定 验证 单 选 按 钮 组 的 空 值 
或 无 效 值 。 

在 单 选 按钮 的 属性 面板 中 为 单 选 按钮 分 配 了 一 个 选 定 值 乙 后 ， 奋 要 创建 共有 衬 值 的 单 
选拔 钮 , 则 单 击 验 证 单 选 授 钮 组 构件 的 览 色 选项 卡 之 后 , 在 “ 选 定 值 ” 文本 框 中 键入 none; 
藻 要 创建 具有 无 效 值 的 单 选 授 钮 ， 则 在 “ 选 定 值 ” 文 本 框 中 键入 invalid。 

当 用 户 选 择 的 早 选 按钮 与 none 或 invalid 关联 时 ， 指 定 的 值 也 相应 地 注册 为 none 或 
invalid。 如 果 用 户 选 择 其 有 空 值 的 单 选 按 钮 ， 则 浏览 右 将 返回 “请 进行 选择 ”的 错误 消 居 。 
如 采用 户 选择 具有 无 效 值 的 单 选 按钮 ， 则 浏览 右 将 返回 “请 选择 一 个 有 效 值 ”的 铺 误 消 息 。 


区 注意 : 
“yy 单 选 按钮 本 身 和 单 选 按钮 组 构件 都 必须 分 配 有 none 或 invalid 值 ， 错 误 
消息 才能 正确 显示 。 


15 此 时 的 页 面 布局 如 图 9-27 所 示 。 保 存 文档 , 按 F12 键 在 浏览 右 中 预览 验证 效果 。 
9.3 ”处理 表单 


本 革 开 头 我 们 说 过 ， 一 个 完整 的 表单 应 该 有 两 个 重要 组 成 部 分 : 一 是 含有 表单 和 表单 
元 聚 的 网 页 文档 ， 为 一 个 是 用 于 处 理 用 户 输入 的 信息 的 服务 右 曾 应 用 程序 或 客户 咒 脚本 。 
因此 硅 要 在 网 页 中 实现 信息 的 真正 交互 ， 仪 在 文档 中 创建 表单 及 表单 对 象 是 不 够 的 ， 还 必 
须 使 用 脚本 或 应 用 程序 来 处 理 相应 的 信息 。 通 常 这 些 脚本 或 应 用 程序 由 <form> 标 记 中 的 
action 属 性 指定 。 如 末 需 要 完成 的 操作 比较 简单 ， 可 以 放 在 客户 站 进行 。 


邮箱 ;1 ai 
登录 害 码 ， 
调 认 登 录 晓 码 
邮件 列表 视图 
NS i 
分组 机 
: 会 话 民 
教育 程度 [学 区 
兴 直 爱好 ， 口 篮球 口 游 补 口 足球 口 尊 洒 口 登山 口 其 他 
站 人 说明 ， 
[| 重 项 | 


图 9-27 ”页面 效果 


下 面 通过 演示 处 理 表 单 的 一 般 方 法 。 

0 全 新 建 一 个 HTML 文件 ， 在 页 面 中 添加 一 张 表单 ， 并 在 属性 面板 上 设置 其 ID 为 
fl1， 动 作为 mailto:webmaster@123.com。 然 后 在 表 蛙 中 插入 一 张 表格 ， 并 设置 表格 的 背景 
颜色 ， 输 入 相关 文本 ， 最 终 的 效果 如 图 9-28 所 示 。 

02 将 光标 放置 于 “密码 ”后 面 的 蛙 元 格 中 。 使 用 “插入 ”/“ 表 单 对 象 ”/“ 文 本 域 ” 
命令 ， 或 者 直接 单 击 “ 插 入 ” 栏 中 “表单 ”面板 中 的 四 按 包 ， 在 表格 申 插 入 文本 域 对 象 ， 
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如 图 9-29 所 示 。 


情 填 写 个 人 资料 ， 


图 9-29 ”添加 文本 域 对 象 


EL0 引 选中 文本 域 对 象 , 在 属性 面板 中 设置 文本 域 的 名 称 为 password, 字符 宽度 为 25， 
最 大 字符 数 为 14， 类 型 为 “密码 ”。 

和 0 全 将 光标 放置 于 含有 “出 生日 期 ”文本 单元 格 的 后 一 个 单元 格 中 ， 单 击 “ 插 入 ” 
栏 中 “表单 ”面板 中 的 思 按钮 ， 再 添加 一 个 文本 域 对 象 ,在 文本 域 对 象 后 键入 文本 a ， 
设置 此 文本 域 对 象 的 名 称 为 year， 了 字符 宽度 为 S， 最 大 字符 数 为 4， 关 型 为 “单行 ” 

始 值 为 20。 

05 有 按照 上 一 步 的 方法 添加 文本 域 对 象 “day” 和 “idcard”。 

EL06 将 光标 放置 于 “个 人 说 明 ” 单 元 格 后 一 单元 格 ， 单 击 呈 按钮 ， 添 加 多 行文 本 域 
对 象 “text”， 设 置 其 起 始 值 为 “请 简要 介绍 目 己 ! ”。 此 时 的 设计 视图 如 图 9-30 所 示 。 


个 人 说 明 : 


图 9-30 ”文本 域 对 象 深 加 效 末 


UL07 用 将 光标 放置 于 “性 别 ” 单 元 格 后 一 个 单元 格 ， 单 击 “ 插 入 ” 栏 “ 表 单 ” 面 板 中 
的 国 按钮 ， 此 时 会 添加 一 个 单 选 框 ， 再 此 单 选 框 后 键入 文本 “ 男 ”。 

140 明 选中 该 单 选 按钮 ， 在 属性 面板 中 为 新 添加 的 单 选 框 对 象 俞 名 “gender”， 设 置 选 
证 值 为 “0”， 初 始 状 态 为 “来 选中 ”。 

09 朋 再 次 单 击 国 按钮 ， 添 加 同名 为 “gender” 的 单 选 框 ， 改 变 选 定 值 为 “1”， 并 在 
单 选 框 后 键入 文本 “ 女 ”。 此 时 文档 的 效果 如 图 9-31 所 示 。 


图 9-31 添加 单 选 框 
和 昌 10 具 将 光标 放置 手 文 本 “姓名 ， 联 系 方式 ”前 面 ， 单 击 “ 表 单 ” 面板 中 的 回 按 钮 ， 
添加 一 个 复 选 枉 ， 设 置 复 选 框 名 称 为 yes2， 初 始 状态 为 “已 勺 选 ”。 
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1 按照 上 面 的 方法 在 文本 “其 他 电 登 记 的 信息 ”前 面 沫 加 一 个 复 选 三， 此 时 的 效 
果 如 图 9-32 所 示 。 


不 大 声明 : 
愿意 其 他 人 可 以 搜索 到 我 的 如 下 资料 ， 这 姓名 ， 联 系 方式 [| 其 他 已 登记 的 信息 


图 9-32 ”添加 复 选 杠 


12 将 光标 放置 于 文本 “年 ”之 后 ， 单 击 “ 表 单 ” 面 板 中 的 国 按 钮 ， 添 加 一 个 下 拉 
来 单 对 象 。 选 中 下 拉 来 单 对 象 ， 单 击 属 性 面板 中 的 “列表 值 ” 按 钮 ， 弹 出 一 个 对 话 框 ， 在 
其 中 设置 列表 值 。 此 处 设置 项 目标 签 与 值 都 是 从 “01” 到 “12”， 如 图 9-33 所 示 。 

13， 在 属性 面板 中 为 下 拉 菜 单 对 象 命 名 “month”， 并 选取 初始 化 时 值 为 “01”。 

14 将 光标 设置 于 “教育 程度 ”单元 格 后 一 个 单元 格 ， 单 击 表 单 面 板 中 的 图 按钮 ， 
添加 一 个 列表 对 象 。 

15 扩 选 定 菜 单 对 象 后 ， 单 击 属性 面板 中 的 “列表 值 ” 按钮 ， 为 列表 设置 列表 值 ， 具 
体 设 置 如 图 9-34 所 示 。 


[机 Ww ] CE 
图 9%-33 ”设置 列表 值 图 9-34 ”设置 列表 值 


16， 在 属性 面板 中 为 列表 命名 “degree”， 设 置 高 度 “3”。 完 成 上 面 的 步骤 后 ， 此 
时 的 页 面 效 果 如 图 9-35 所 示 。 


教育 水 平 : 


图 9-35 ”添加 列表 / 沫 单 效 来 图 


17， 将 光标 置 于 “个 人 风采 ”单元 格 的 下 一 个 单元 格 ， 单 击 表单 面板 中 的 到 按钮 ， 
添加 一 个 文件 域 对 象 。 

18， 选 中 文件 域 对 象 ， 在 属性 面板 中 为 其 命名 “file”， 选 取 字 符 宽 度 “50”， 最 大 
字符 数 “20”。 此 时 的 页 面 效 果 如 图 9-36 所 示 。 

图 9-36 ”添加 文本 域 

19 将 光标 放置 于 最 后 一 个 单元 格 ， 单 击 表单 面板 中 的 时 按钮 添加 一 个 按钮 对 象 。 

20 选中 按钮 对 象 ， 在 属性 面板 中 为 其 命名 “submit3”， 标 签 为 “提交 ”， 动 作为 
“提交 表单 ”。 同 理 ， 添 加 “ 重 填 ”按钮 。 

至 此 基本 完成 ， 可 以 保存 文档 并 按 F12 键 在 浏览 器 中 浏览 测试 ， 如 图 9-37 所 示 。 

通过 测试 会 发 现 ， 在 表单 中 没有 填 任 何 数 据 ， 或 填 的 数据 无 效 时 , 早 击 “确定 ”按钮 
后 仍然 会 提交 表单 。 这 是 网 页 设计 者 所 不 愿 看 到 的 ， 为 了 解决 这 个 问题 ， 可 以 用 JavaScript 
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脚本 语言 来 对 表单 各 对 象 的 值 进行 有 效 性 检查 ,具体 步 又 如 下 。 


CE 
个 二 讽 响 ， 


个 人 局 采 ， 


个 大 声明 
委 愿 章 其 全 作 可 型 搜索 到 我 的 如 下 信息 。 国 姓名 ,联系 方式 。 国 其 他 已 章 记 的 信息 


图 9-37 ”页 面 效果 
21 执行 “ 簿 看 ”/“ 文 件 头 内 容 ” 命令 显示 文档 窗口 的 头 部 。 在 插入 栏 单 击 “ 名 用 ” 
面板 中 的 “脚本 ”按钮 急 3， 弹 出 “脚本 ”对 话 框 。 
22 “语言 ”选择 “JavaScript”， 在 “内 容 ” 文 本 框 输入 以 下 JavaScript 程序 段 : 


function checkEorm() { 


if(document .fl1.passwordaq.valLue=="") { 
alert (" 蜜 但 不 能 为 空 ! ") ; 
return false; 
} 


return true; 


GD 二 “确定 ”按钮 ， 在 弹出 上 下 文 亲 单 中 执行 “编辑 标签 ”命令 ， 弹 出 图 9-38 
所 示 的 “标签 编辑 器 ”对 话 框 。 


图 9-38 “标签 编辑 器” 对 话 杠 


《24 单 击 “ 事 件 ” 前 面 的 加 号 展开 事件 ， 选 中 onClick， 这 时 标签 编辑 对 话 框 右边 将 
显示 Input-onClick 文本 框 。 
和 25 朋 在 Input-onClick 文本 框 中 输入 事件 处 理 代码 “return checkForm0” 后 单 击 “ 确 定 ” 
按钮 关闭 对 话 框 。 
26 保存 文档 ， 在 浏览 器 中 预览 页 面 效果 ， 至 此 示例 全 部 完成 。 
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本 例 网 页 的 最 终 功能 只 ,检验 输入 阅 守 加 最 多 可 以 输入 14 个 字符 ; 当 密 人 为 空 值 时 ， 
单 击 “ 确 定 ” 按 钮 会 弹出 相应 的 错误 提示 对 话 框 ， 并 取消 提交 表单 。 

上 一 市 中 我 们 介绍 过 ，Spry 表 单 验 证 构件 不 需要 编 妈 ， 束 可 以 对 部 分 表单 对 象 的 值 进 
行 有 效 性 检查 。 在 本 例 中 ， 可 以 用 Spry 验 证 文本 域 荐 换 文本 域 ， 用 Spry 验 证 文本 区 域 蔡 换 
多 行文 本 域 ， 用 Spry 验 证 复 选 框 蔡 换 复 选 框 ， 则 当 和 密码 为 空 值 ， 或 输入 的 映 份 证 写 位 数 不 
正确 ， 或 个 人 说 明 字 人 符 数 不 合 要 求 ， 或 选择 的 复 选 框 个 数 过 多 或 过 少时 ， 单 击 “ 提 交 ” 按 
钮 会 弹出 相应 的 错误 提示 对 话 框 ， 并 取消 表单 提交 。 有 兴趣 的 谈 者 可 以 仿照 本 例 的 步骤 使 
用 Spry 验 证 构件 制作 一 个 页 面 进行 测试 。 


9.4 实例 制作 之 制作 留言 板 


本 例 制 作 的 留言 筹 页 面 是 导航 项 目 图 片 “ 语 过 添 情 ”的 链接 目标 。 由 于 其 页 面 布局 与 
主页 相同 ， 所 以 本 例 使 用 模板 制作 留言 短 ， 步 骤 如 下 : 

和 019 打开 已 制作 的 个 人 主页 index.html， 选 中 正文 部 分 的 表格 〈 即 页 面 右 侧 的 表格 ) 。 

和 02 打开 “插入 ”浮动 面板 ， 并 切换 到 “常用 ”面板 。 单 击 “ 常 用 ”面板 上 的 “可 
编辑 区 域 ” 按 钮 留 "， 弹 出 一 个 信息 提示 框 ， 提 示 用 户 执行 此 操作 ，Dreamweaver 会 自动 将 
此 文档 转换 为 模板 。 

和 03 昌 单 击 “ 确 定 ”按钮 ， 在 弹出 的 “新 建 可 编辑 区 域 ”对话 杠 中， 将 可 编辑 区 域 命 
名 为 content， 然 后 单 击 “确定 ”按钮 关闭 对 话 框 。 即 可 将 选中 表格 变 为 可 编辑 区 域 ， 如 图 
9-39 上 所 示 。 


图 9-39 ”插入 可 编辑 区 域 
04 执行 “文件 ”/“ 另 保存 为 模板 ”命令 ， 将 index.html 男 存 为 模板 。 
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05 几 执行 “文件 ”/“ 资 源 ” 命 令 ， 打开“ 资源 ”面板 。 单 击 “ 资 源 ” 面 板 左 侧 的 模 
板 按 钮 图 ， 切 换 到 “模板 ”面板 。 

06 在 模板 列表 中 选中 模板 index.dwt， 单 击 右键 ， 从 弹出 的 上 下 文采 单 中 选择 “从 
模板 狐 建 ”命令 ， 即 可 新 建 一 个 与 index.html 相 同 的 未 命名 文档 ,但 只 有 命名 为 content 的 区 
域 可 以 编辑 。 

有 关 模 板 的 介绍 将 在 第 12 章 进行 讲解 。 

07 9 删除 正文 区 域 第 二 行人 宇 第 四 行 的 内 容 ,， 然后 将 “欢迎 光临 我 的 小 屋 ” 修 改 为 “ 语 

过 深情 ”， 此 时 的 页 和 面 如 图 9-40 所 示 。 


曾 wuiueez (nrm)s - 口 X 


图 9-40 ”修改 标题 文字 


0 四 夺 中 第 二 行 全 第 四 行 的 单元 格 ， 在 属性 面板 上 单 击 “ 合 并 单元 格 ” 按 钮 ， 将 选 


中 的 单元 格 合并 为 一 行 。 设 置 单元 格 内 容 的 水 平 对 齐 方式 为 “居中 对 齐 ”， 王 直 对 齐 方式 
为 “ 顶 闹 ”。 
09 将 光标 定位 在 单元 格 中 ， 单 击 “ 插 入 ”面板 上 的 “表单 ”页 签 ， 切 换 到 “表单 ” 
面板 。 然 后 单 击 “ 表 单 ” 按 钮 四 ， 在 单元 格 中 插入 一 个 表单 。 
10 在 表单 的 属性 和 面板 上 ， 设 置 表单 的 名 称 为 forml1。 在 “动作 ”文本 框 中 输 
入 mailto:vivi@123.com。 在 “方法 ”下 拉 列 表 中 选择 “POST”。 在 “目标 ”下 拉 列 表 中 选 
择 “ blank” 。 
当 浏 览 者 单 击 表单 的 “提交 ”按钮 后 ， 访 表单 内 容 将 会 发 送 到 指定 的 邮箱 。 
11 旧 将 光标 放置 在 表单 中 ， 单 击 “ 常 用 ”面板 上 的 “表格 ”按钮 图 ， 在 弹出 的 对 话 
框 中 设置 表格 的 行 数 为 5， 列 数 为 2， 表 格 宽度 为 98%， 边 框 粗细 为 1 像素 。 单 击 “ 确 定 ” 按 
钮 在 页 面 中 插入 一 个 5 行 2 列 的 表格 。 
12 选中 正文 区 域 的 大 表格 ， 在 属性 面板 上 将 “填充 ”和 “间距 ” 均 设 置 为 $9。 选 中 
表格 ， 打 开 “CSS 面 板 ”， 单 击 “ 新 建 CSS 规 则 ”按钮 ， 在 弹出 的 “ 痢 建 CSS 规 则 ”对 话 框 
中 设置 选择 器 类 型 为 “复合 内 容 ”， 选 择 器 名 称 为 #forml table， 规 则 定义 的 位 置 “ 仅 限 该 
文档 ”， 然 后 单 击 “ 确 定 ” 按 钮 ， 在 弹出 的 规则 定义 对 话 框 中 选择 “边框 ”分 类 ， 议 置 类 
型 为 Solid， 宽 上 度 为 1 像素 ， 颜 色 为 把 c0。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 此 时 的 表格 如 多 
9-41 所 示 。 
13 在 第 一 列 的 前 四 行 单元 格 中 输入 文本 ， 例 如 : 上 昵称、 性 别 、 主 题 类 别 、 留 言 。 
14 将 光标 放置 在 第 一 行 第 二 列 的 单元 格 中 ， 单 击 “ 表 单 ” 和 面板 中 的 Spry 验 证 文本 
域 图 标 按钮 ， 插 入 一 个 Spry 验 证 文本 域 。 
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图 9-41 插入 表格 


15 选中 Spry 验 证 文本 域 ， 在 其 属性 面板 上 设置 其 “最 小 字符 数 ” 为 2，“ 最 大 字符 
数 ” 为 12; “预览 状态 ”为 “初始 ”。 其 他 选项 保留 默认 设置 。 选 中 文本 域 ， wy 
上 指定 其 ID 为 name，“ 字 人 符 宽 度 ” 为 14，“ 最 多 字符 数 ” 为 12，“ 类 型 ”为 “单行 ”。 
时 的 页 面 如 图 9-42 所 示 。 

16 将 光标 定位 在 第 二 行 第 二 列 的 单元 格 中 ， 单 击 “ 插 入 ” 栏 “ 表 单 ” 面 板 中 的 “ 单 
选 按 钮 ” 图， 此 时 会 添加 一 个 单 选 三， 再 此 单 选 框 后 键入 文本 “帅哥 ”。 

17 选中 该 单 选 按钮 ， 在 属性 面板 中 为 新 添加 的 单 选 框 对 象 命 名 “gender”， 设 置 
选 定 值 为 0， 初 始 状态 为 “未 选中 ”。 

18， 再 次 单 击 图 按钮 ， 添 加 同名 为 “gender” 的 单 选 枉 ， 改 变 选 定 值 为 1， 并 在 单 选 
框 后 键入 文本 “美眉 ”。 此 时 文档 的 效果 如 图 9-43 所 示 。 
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图 9-43 ”添加 单 选 框 
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19 DreaomWearer C086 中文 及 入 门 己 粮 言 实例 者 下 


19 在 “主题 类 别 ” 后 的 里 元 格 中 插入 一 个 Spry 验 证 选择 构件 。 在 属性 面板 上 将 其 
名 称 设置 为 iem，“ 预 哆 状态 ”为 “ 必 填 ”， 其 他 选项 保留 峡 认 设置 。 

20 在 负面 上 单 击 搬入 的 Spry 选 择 构 件 ， 在 属性 面板 上 设置 其 “类 型 ”为 “有 亲 单 ”， 
然后 单 击 “列表 值 ” 控 钮 ,在 弹出 的 对 话 框 中 编辑 该 选择 构件 的 各 个 选项 。 如 软件 、 文 学 、 
图 像 、 情 感 、 娱 乐 、 其 他 、 请 选择 一 个 类 别 。 

21 单 击 “ 确 定 ”按钮 关闭“ 列表 值 ” 对 话 框 ， 在 属性 面板 的 “初始 时 选 定 ” 列 表 
框 中 选中 “请 选择 一 个 类 别 ”。 此 时 的 页 面 如 图 9-44 所 示 。 
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图 9-44 ”添加 Spry 验 证 选择 


22 在 “留言 ”后 的 单元 格 中 插入 一 个 Spry 验 证 文本 区 域 , 并 在 属性 面板 上 设置 其 名 
称 为 liuyan,， “最 小 子 付 数 ” 和 “最 大 子 符 数 ”分 别 为 6 和 300,， “计数 融 ” 为 “其 余子 付 ”， 
即 提示 浏览 者 还 可 以 输入 多 少 个 字符 , “提示 ”为 “请 留 下 您 的 宇 吐 意见 或 建议 。”,，“ 预 
览 状态 ”为 “有 效 ”， 其 他 选项 保留 默认 设置 。 此 时 的 页 面 如 图 9-45 所 示 。 

23 具 选中 最 后 一 行 单元 格 , 单 击 属性 面板 上 的 合并 单元 格 按钮 , 将 其 合并 为 一 个 单元 
格 ， 并 设置 单元 格 内 容 的 水 平 对 章 方 式 为 “居中 对 章 ”。 然 后 在 其 中 插入 两 个 控 钮 。 

24 月 选中 第 一 个 按钮 ,在 属性 面板 上 设置 其 名 称 为 submit, 值 为 “提交 ”, 动作 为 “所 
交 表 单 ”。 选 中 第 二 个 近 钮 ， 在 属性 面板 上 设置 其 名 称 为 reset， 值 为 “ 重 写 ”， 动 作为 “ 重 
设 表 单 ”。 
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图 9-45 ”添加 Spry 验 证 文本 区 域 
25 调整 表格 的 高 上 度 到 合适 位 置 ， 然 后 保存 文档 ，Dreamweaver 将 弹出 一 个 “复制 相 
关 文 件 ” 对 话 框 ， 提 示 用 户 页 面 上 的 对 象 需要 的 文 持 文件 已 复制 到 本 地 站 点 ， 要 使 相应 的 
对 和 象 能 正常 工作 ， 必 须 将 这 些 文 件 上 传 到 服务 器 。 
26 | 蛙 击 “ 铺 定 ”按钮 ， 上 传 支持 文件 ， 然 后 按 下 F12 键 在 浏览 器 中 预 钨 页 面 。 
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当 和 输入 的 文本 有 效 ， 单 击 “ 提 交 乱 按 钼 即 可 将 表单 数据 发 达到 指定 的 邮箱 ， 且 Spry 构 
件 的 背景 色 为 绿色 ; 人 否则 不 提交 表单 并 显示 一 个 错误 提示 框 ， 显 示 为 相应 的 颜色 ， 如 图 
9-46 所 示 。 


主格 于 四. 


图 9-46 ”页 面 预览 效果 


由 于 本 例 设置 了 “其 余子 和 从 ”类 型 的 计数 费 ， 因 此 ， 如 果 在 “留言 ”文本 区 域 没 有 输 
入 字符 ， 则 显示 为 300， 每 输入 一 个 子 符 ， 则 计数 占 就 递减 。 
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10.1 事件 与 动作 


在 Dreamweaver 中 , 行为 是 事件 (Event) 和 动作 Cpl 的 组 合 , 是 容 户 闹 JavaScript 
代码 。 通 过 在 浏览 页 面 中 触发 事件 ， 从 而 发 生菜 个 动作 ， 这 就 是 行为 的 本 质 功能 。 

所 谓 事 件 ， 残 是 浏 遇 器 啊 应 访问 者 的 操作 行为 ， 是 训 览 夯 生 成 的 消息 ， 指 示 该 页 的 访 
问 者 执行 了 茶 种 操作 。 例 如 ， 当 访问 者 将 鼠标 指针 移动 到 某 个 链接 上 时 ， 浏 览 堪 为 该 链接 
生成 一 个 OnMouseOver 事件 。 网 页 制作 过 程 中 常用 的 事件 入 下 : 

onAbort: 当 用 户 终 止 浏览 器 对 一 幅 图 像 的 载 入 时 会 触 友 该 事件 。 例如 在 图 像 下载 过 程 
中 ， 用 户 单 击 浏览 器 的 “停止 ”按钮 时 ， 就 会 触发 该 事件 。 

onBlur: 当 指 定 的 元 素 不 再 是 用 户 交 互 行为 的 焦点 时 ， 人 触发 该 事件 。 例 如 ， 光 标 原 集 
留 在 文本 框 中 ， 当 用 户 单 击 此 文本 框 之 外 的 对 象 时 ， 触 友 该 事件。 

onChange: 当 用 户 改 变 了 页 和 面 中 阿 值 时 ， 触 友 该 事件 。 

onClick: 当 用 户 单 击 在 页 面 上 茶 一 特定 的 元 素 时 ， 触 发 该 事件 。 

onDblClick: 当 用 户 双 击 在 页 面 上 某 一 特定 的 元 素 ， 触 发 该 事件 。 

onError: 当 浏 览 器 在 载 入 页 面 或 图 像 过 程 中 发 生 错 误 时 ， 触 发 该 事件 。 

onFocus: 本 事件 与 onBlur 事件 正好 相反 ， 将 光标 定位 在 指定 的 焦点 时 ， 和 触发 该 事件 。 

onKeyDown: 当 用 户 按 下 键盘 上 的 一 个 键 ， 无 论 是 否 释 放 该 键 都 会 触发 该 事件 。 

onKeyPress: 当 用 户 按 下 键盘 上 的 一 个 键 ， 然 后 释放 该 键 时 ， 和 触发 该 事件 。 访 事件 可 
以 看 作 是 onKeyUp 和 onKeyDown 两 个 事件 的 组 合 。 

onKeyUp: 当 用 户 按 下 键盘 上 的 一 个 键 ， 在 释放 该 键 时 ， 触 发 该 事件 。 

onLoad: 当 一 幅 图 像 或 页 面 完成 载 入 之 后 ， 触 发 该 事件 。 

onMouseDown: 当 用 尸 授 下 鼠标 左 键 尚未 释放 时 ， 触 发 该 事件 。 

onMouseOver: 当 用 户 将 鼠标 指针 移 开 指定 元 系 的 苑 围 时 ， 触 友 访 事件 。 

onMouseUp: 当 按 下 的 鼠标 按钮 被 释放 时 ， 人 触发 该 事件 。 

onMove: 当 浏 览 窗口 或 框 由 移 动 时 ， 和 触发 该 事件 。 

onReadyStateChange: 当 指 定 的 状态 发 生 改 变 时 ， 触 友 该 事件。 可 能 的 元 素 状态 包括 : 
未 初始 化 (uninitialiazed) 、 载 入 (loading) 和 完成 (complete) 。 

onReset: 当 一 个 表 蛙 中 的 数据 被 重 置 时 ， 触 发 该 事件 。 

onScroll: 当 利 用 滚动 条 或 箭头 键 上 下 滚动 显示 内 容 时 ， 触 发 该 事件 。 

onSelect: 当 从 文本 框 中 选取 文本 时 ， 触 发 该 事件 。 

onSubmit: 当 用 户 提 交 表 单 时 ， 触 有 该 事件 。 

onUnload: 当 用 户 离开 页 和 面 时 ， 触 友 该 事件 。 

读者 要 注意 的 是 ， 不 同 的 页 和 面 元 素 定 义 了 不 同 的 事件 ， 例 
如 ， 在 大 多 数 浏览 器 中 ，OnMouseOver 和 OnClick 是 与 链接 关联 
的 事件 ， 而 OnLoad 是 与 图 像 和 文档 的 body 部 分 关联 的 事件 。 知 
要 全 看 对 于 给 定 的 页 面 元 素 及 给 定 的 浏览 器 文 持 哪些 事件 ， 可 
以 选中 页 面 上 的 元 系 之 后 ， 单 击 “ 行 为 ”面板 上 的 “显示 所 有 
事件 ”按钮 ， 如 图 10-1 所 示 。 
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图 10-1 事件 列表 
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动作 由 预先 编写 的 JavaScript 代 人 码 组 成 ， 通 过 在 网 页 中 执行 这 段 代 人 码 执 行 特定 的 任务 ， 
比如 打开 浏览 融 窗 口 、 显 示 或 隐藏 元 素 、 检 栓 表 单 或 应 用 Spry 效 果 等 。 

单个 事件 可 以 触发 多 个 不 同 的 动作 ， 这 些 动作 发 生 的 顺序 可 以 在 Dreamweaver 中 被 指 
定 ， 从 而 达到 需要 的 效果 。 


10.2 行为 管理 面板 


利用 行为 可 以 实现 用 户 和 网 页 之 间 的 交互 。 用户 通过 在 网 页 中 触发 一 定 的 事件 来 引发 
一 些 相应 的 动作 。 在 Dreamweaver 中 ， 添 加 和 控制 行为 主要 是 在 “行为 ”面板 上 实现 的 
如 果 有 必要 ， 还 可 以 直接 打开 对 应 的 HTML 源 文件 ， 对 其 中 的 代码 进行 必要 的 修改 。 
执行 “窗口 ”/“ 行 为 ”菜单 命令 ， 即 可 打开 “行为 ”面板 ， 如 图 10-2 所 示 。 


标签 检查 器 [ER 
属性 | 行为 | 标签 《input>》 
国 寺 | -: 


图 10-2 “行为 ”和 面板 


该 面板 中 各 个 部 分 的 功能 简要 介绍 如 下 : 

“; 仅 列 出 附加 到 当前 元 素 的 动作 对 应 的 事件 。 

事件 家 分 别 划 归 到 客户 站 或 服务 器 站 关 别 中 。 每 个 闫 别 的 事件 都 包含 在 一 个 可 折 有 登 的 
列表 中 ， 可 以 单 击 类 别名 称 劳 边 的 加 号 或 减 写 按钮 展开 或 折 舍 该 列表 。 
;在 行为 列表 中 按 子 母 降序 列 出 可 应 用 于 当前 元 素 的 所 有 事件 。 

:弹出 行为 列表 ， 包 含 可 以 附加 a 到 当前 所 选 元 素 的 动作 。 对 当前 个 能 使 用 的 行为 ， 
则 以 灰色 显示 。 

一 删除 当前 选择 的 行为 。 

宇和 了: 改变 附加 到 当前 页 面 元 素 的 所 有 动作 的 执行 顺序 。 

! ~, 单 击 行为 列表 中 所 选 事件 名 称 旁 边 的 箭头 按钮 ， 即 可 打开 图 10-2 所 示 的 
事件 列表 ， 其 中 包含 可 以 触发 指定 动作 的 所 有 事件 。 

只 有 在 选择 了 行为 列表 中 的 茶 个 事件 时 才 显 示 此 菜单 。 根 据 所 选 对 象 的 不 同 ， 显 示 的 
事件 也 有 所 不 同 。 如 末 未 显示 预期 的 事件 ， 则 应 检查 是 否 选择 了 正确 的 网 页 元 系 或 标签 。 


10.3 ”附加 行为 到 页 面 元 素 


行为 被 规定 附属 于 用 户 页 面 上 的 茶 个 特定 的 元 素 ， 可 以 是 一 个 文本 链接 、 一 个 图 像 其 
全 <body> 标 识 ， 但 是 不 能 将 行为 绑 定 到 纯 文本 ， 诸 如 <p> 和 <span> 等 标签 。 
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下 面 潮 示 将 行为 附加 a 到 页 面 元 了 系 的 基体 步 桑 。 
019 选取 页 面 元 素 的 标识 。 本 例 选 择 页 面 中 插入 的 一 张 图片 。 
所 有 的 行为 被 连接 到 特定 的 HTML 元 素 上 。 用 户 可 以 将 某 个 行为 附加 于 来 自 某 个 表单 
的 任何 元 素 。 如 末 某 种 行为 不 可 用 ， 是 因为 页 面 中 还 没有 其 对 应 的 HIML 标签 。 
02 选择 用 户 的 目标 浏览 器 。 执 行 “ 文 件 ”/“ 检 枉 页 ”/“ 浏 览 旨 兼 容 性 ”六 日 命令 ， 
打开 “浏览 器 兼容 性 检查 ”页 和 面 。 单 击 左 侧 的 绿色 三 角形 按钮 ， 从 弹出 六 单 中 选择 “设置 ” 
命令 ， 如 图 10-3 所 示 。 


| 惠 表 | 区 专 | 鸡 证 | 由 吕 和 性 | 证 可 器 | 站 点 报告 | FF 记录 ] 服务 器 调式 | 
区 | 行 “| 问题 浏 览 回 支持 问题 


检查 浏览 器 兼容 性 CC) 要 开始 使 用 ,请 打开 交 档 并 从 左 侧 的 和 z 头 菜单 中 尘 择 "检查 浏览 器 兼容 性 "“。 
编辑 被 乱 略 问题 的 列表 FE) 


Sy 亿 到 了 Dreamweaver 未 报 肯 的 呈现 问题 ? 请 检 查 Adobe_ com 上 的 新 问题 报 肯 。 


《 
未 检测 到 任何 问题 。 


图 10-3 选择 “设置 ”有 沫 单项 


此 时 打开 图 10-4 左 图 所 示 的 “目标 浏览 器 ”对 话 框 。 
03) 选中 某 种 浏览 器 之 后 ， 单 击 其 后 的 下 拉 菜 单 按钮 ， 可 以 从 中 选择 目标 浏览 器 的 
最 低 版 本 ， 如 图 10-4 右 图 所 示 。 本 例 使 用 默认 设置 。 
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图 10-4 “目标 浏览 器 ”对 话 框 
不 同 的 浏览 器 和 不 同 的 浏览 右 厂 本 文 持 不 同 的 事件 。 选 择 的 目标 浏览 亏 决 定 哪 些 元 又 


伞 文 持 用 于 一 个 特定 元 素 。 
04 朋 选择 一 个 动作 。 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 itj， 从 动作 弹出 式 菜 

单 中 选择 一 个 动作 。 本 例 选 择 “ 交 换 图 像 ” 行 为 。 

行为 是 为 啊 应 茶 一 具体 事件 而 采取 的 一 个 或 多 个 动作 。 当 指定 的 事件 被 甬 用 时， 将 运 
行 相 应 的 JavaScript 程序 ， 执 行 相 应 的 动作 。 所 以 当 创建 行为 时 ， 必 须 先 指定 一 个 动作 ， 
然后 再 指定 触发 动作 的 事件 。 

此 外 ，Dreamweaver 只 使 那些 可 用 于 特定 页 面 元 素 的 动作 处 于 激活 状态 。 沫 单 中 某 些 
动作 灰 显 的 原因 可 能 是 当前 文档 中 不 存在 所 需 的 对 象 。 如 采 所 选 的 对 象 无 可 用 事件 ， 则 所 


有 动作 都 炙 显 。 
行为 的 强大 功能 来 日 于 它 的 姑 活 性 。 每 个 动作 部 高 有 一 个 特定 的 对 话 框 ， 用 于 用 户 目 
定义 行为 。 


05 输入 参数 。 在 行为 列表 中 选择 “交换 图 像 ” 行 为 之 后 ,打开 “交换 图 像 ” 对 话 框 。 

单 击 “浏览 ”按钮 ， 浏 览 并 定位 到 将 设置 为 鼠标 经 过 时 显示 的 图 像 ， 如 图 10-5 所 示 。 
06 设置 事件 。 单 击 “ 确 定 ” 按 钮 关闭 “交换 图 像 ” 对 话 框 。 此 时 ,“ 行 为 ”面板 中 
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已 列 出 了 已 应 用 的 动作 及 默认 的 事件 。 单 击 事件 下 拉 表 单 ， 可 以 从 中 选择 需要 的 事件 ， 如 
图 10-6 所 示 。 


尾 性 | 行为 | 标签 《img> 


| -三 
3 区 “pic” +* | == | 三 三 +、 一 和 7 
Pre 
lo ouUSeDyer 帆 氏 | 才 
onKevlow 
onkevPress a 
onke 在 下 拉 列 表 中 


设 定 原始 档 洲 : jimages/ 17. gif 避 贤 5 oad 王 选择 事件 


预先 载 入 图 像 
鼠标 滑 开 时 恢复 图 像 


图 10-5 “交换 图 像 ” 对 话 框 图 10-6 选择 事件 
本 例 对 一 个 图 像 附加 了 “交换 图 像 ” 行 为， 默认 的 事件 为 onMouseOver。Dreamweaver 


CS6 还 默认 为 该 图 像 应 用 了 “恢复 交换 岁 像 ” 行 为 ， 事 件 为 onMouseOut。 本 例 使 用 默认 
的 事件 。 


在 Dreamweaver CS6 中 ， 可 以 为 每 个 选 定 的 页 面 元 素 指 定 多 个 动作 。 动 作 以 它们 在 行 


为 面板 的 动作 列表 中 列 出 的 顺序 依次 发 生 。 


07 按照 第 是 04 旧 ~ 用 06 昌 步 的 方法 为 页 面 元 素 添 加 其 他 行为 。 
08. 保存 文档 。 按 F12 键 在 浏览 器 中 预览 行为 的 效果 。 
当 鼠 标 移 到 图 片上 时 ， 显 示 在 “交换 图 像 ” 对 话 框 中 选择 的 “ 诛 始 档 ” 文 件 ， 将 鼠标 


移 开 ， 则 恢复 显示 原来 的 图 片 。 


| 

是 

| | 

| 提示: 
| 

1 

1 

| 


| javascript:;， 或 直接 键入 一 个 #) ， 然 后 将 行为 附加 于 这 个 链接 。 


| 行为 不 能 附加 到 纯 文本 ,但 可 以 被 附加 于 一 个 链接 。 因 此 ， 老 要 把 一 个 行 | 
为 附加 于 文本 ， 一 个 简单 的 方法 是 为 文本 添加 一 个 空 链接 ( 在 “链接 ”文本 框 中 输入 | 


10.4 ”编辑 行为 


Dreamweaver 预 置 的 行为 功能 不 仅 很 强大 ， 而 且 很 灵活 。 在 附加 了 行为 之后 ， 可 以 更 


改 触发 动作 的 事件 、 添 加 或 删除 动作 以 及 更 改动 作 的 参数 。 修 改行 为 的 操作 步骤 如 下 : 


(1) 执行 “窗口 ”/“ 行 为 ”命令 ， 打 开 “ 行 为 ”面板 。 
(2) 选择 一 个 附加 了 行为 的 对 象 。 
(3) 在 “行为 ”面板 中 双击 要 重新 编辑 的 行为 名 称 ， 然 后 在 弹出 的 对 话 框 中 重新 设 


置 动作 的 参数 。 


此 外 ， 所 有 的 预 置 行为 都 可 以 被 修改 ， 并 且 作 为 一 个 新 的 行为 添加 到 行为 列表 中 。 只 


要 将 相应 的 HTML 文 件 复制 到 Dreamweaver 安 闭 目 录 的 Configeuration\Behaviors\Action 文 件 
夹 中 ， 然 后 重新 司 动 Dreamweaver 即 可 。 


如 条 不 再 需要 指定 元 又 已 附加 的 茶 个 行为 ， 在 “行为 ”面板 中 选择 该 行为 ， 然 后 单 击 


面板 顶部 的 二 按钮 即 可 删除 ， 如 图 10-7 所 示 。 
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标签 检查 器 | 
尾 性 | 行为 | 标签 “img> 
[== 


| onllouseDut 
orMouseDwver 


图 10-7 删除 附加 的 行为 


10.5 Dreamweaver CS6 的 内 置 行为 


Dreamweaver CS6 为 常见 的 行为 动作 编写 了 代码 并 进行 封装 。 读 者 只 需要 人 简 蛙 地 设 定 
一 些 参 数 变 量 就 可 以 方便 地 为 网 页 生成 一 些 复杂 的 交互 和 动态 功能 。 
下 面 通 过 一 些 实例 癌 读 者 介绍 Dreamweaver CS6 内 置 的 行为 。 


10. 5.1 改变 属性 


“改变 属性 ”动作 可 以 动态 地 改变 某 一 个 对 和 象 的 属性 值 , 例如 AP 元 素 的 背景 图 像 或 背 
景色 ， 图 像 的 边框 和 样式 。 这 些 属性 的 具体 效果 由 所 使 用 的 浏览 器 决定 。 

下 面 演示 使 用 改变 属性 行为 的 步骤 。 

01 9 狐 建 一 个 HTML 文 档 ， 并 在 页 和 面 中 插入 一 张 表单 。 

02 打开 “布局 ”插入 面板， 然后 单 击 “ 插 入 div 标 签 ” 投 钮 辐 。 

03 在 弹出 的 对 话 框 中 的 “插入 ”下 拉 列 表 中 选择 “在 插入 点 ”; 在 “ID” 文 本 框 
中 输入 <div> 标 签 的 名 称 dd。 然 后 单 击 对 话 框 底部 的 “新 建 CSS 规 则 ”按钮 。 

04 在 弹出 的 “新 建 CSS 规 则 ”对 话 框 中 设置 选择 吉 类 型 为 “标签 ”， 然 后 在 “选择 
髓 名 称 ” 下 拉 列 表 中 选择 标签 div。 单 击 “ 确 定 ” 投 钮 打开 规则 定义 对 话 框 。 

05 切换 到 “区 块 ” 分 类 ， 设 置 文 本 对 齐 方式 为 “居中 对 齐 ”， 然 后 单 击 “人 确定” 按 
钮 关闭 对 话 框 。 此 时 在 表单 中 显示 文本 “此 处 显示 id'dd' 的 内 容 ”。 

06 删除 表单 中 显示 的 文本 ， 在 div 标 签 中 插入 一 个 按钮 ， 然 后 在 属性 面板 上 将 按钮 
的 “ 值 ” 设 置 为 “点 击 这 里 ”，“ 动 作 ” 属 性 设置 为 “无 ”。 

07 选中 按钮 ， 然 后 单 击 “行为 ”面板 上 的 加 写 (+) 按钮， 在 弹出 菜单 中 选择 “ 改 
变 属性 ”命令 ， 弹 出 图 10-8 所 示 的 “改变 属性 ”对 话 框 。 


元 未 类 型 。 | | 了 


元 素 ID: | DIV “dd v| 
1 帮助 
尾 性 : © 选择 : backer oundC ol or v 
O 输入: | | 
新 的 值 : | 


图 10-8 “改变 属性 ”对 话 框 


08 在 “元 素 类 型 ”后 面 的 下 拉 列 表 中 选择 改变 属性 的 对 象 标签 。 本 例 选 择 DIV。 
对 象 基 型 有 如 下 几 种 : 

DIV、SPAN: 这 两 种 类 型 是 AP 元 素 标签 ， 用 于 改变 AP 元 素 的 属性 。 

IMG: 图 像 标 签 ， 用 于 改变 一 幅 图 像 的 属性 。 
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FORM: 表单 标签 ， 用 于 改变 表单 的 属性 。 
INPUT/CHEKBOX: 复 选 框 标签 ， 用 于 改变 复 选 框 的 属性 。 
INPUT/RADIO: 单 选 按 钮 标签 ， 用 于 改变 单 选 按 钮 的 属性 。 
INPUT/TEXT: 单行 文本 输入 框 标识 ， 用 语 改 变 单行 文本 输入 框 的 属性 。 
INPUT/PASSWORD: 口令 输入 框 标记 ， 用 于 改变 口令 输入 框 的 属性 。 
TEXTAREA: 多 行文 本 输入 框 标 签 ， 用 于 改变 多 行文 本 输入 框 的 属性 。 
SELECT: 选择 列表 项 标签 ， 用 于 改变 选择 列表 项 的 属性 。 
09 上 在“ 元素 ID” 右 侧 的 下 拉 列 表 中 选择 已 命名 的 div 对 象 dd。 
10 上 用 在“ 属性” 区域 选中 “选择 ”， 然 后 在 后 面 的 下 拉 列 表 中 选择 一 项 要 改变 的 属 
本 例 选 择 backgroundColor。 
如 果 选 择 “ 输 入 ”， 则 可 以 直接 在 后 面 的 文本 框 中 输入 要 改变 的 对 象 属性 。 
11 在 “新 的 值 ” 后 面 的 文本 框 中 设置 所 选择 对 象 狐 的 属性 值 ， 本 例 输 入 green。 然 
后 单 击 “确定 ”按钮 关闭 对 话 框 。 
12 打开 “行为 ”和 面板， 为 改变 属性 动作 选择 需要 的 事件 onClick。 
13 肯 保存 文档 ， 并 在 实时 视图 中 进行 测试 。 
在 浏览 器 中 单 击 “点 击 这 里 ”按钮 时 ， 表 单 背景 将 变 为 绿色 ， 如 图 10-9 所 示 。 


+ 


图 10-9 “改变 属性 ”动作 的 效果 


| 
- 


10. 5.2 ”交换 图 像 /恢复 交换 图 像 


“ 克 换 图 像 / 恢 复 交 换 图 像 ”动作 通过 更 改 ximg> 标 签 的 src 属 性 将 一 个 图 像 和 为 一 个 图 
像 进行 交换 。 使 用 此 动作 可 以 使 一 幅 图 像 产 生变 换 。“ 恢 复 交 换 图 像 ” 动 作 只 有 在 “交换 
图 像 ”动作 之 后 使 用 才 有 效 。 

使 用 “交换 图 像 ” 动 作 的 步 又 如 下 : 

(1) 选择 一 个 图 像 对 象 ， 并 打开 “行为 ”面板 。 

(2) 单 击 “行为 ”面板 上 的 “添加 行为 ”按钮 .*， 并 从 动作 弹出 式 采 单 中 执行 “ 交 
换 图 像 ” 命 令 ， 弹 出 “交换 图 像 ” 对 话 框 ， 如 图 10-10 所 示 。 

(3) 对 该 对 话 框 各 个 选项 进行 设置 ， 该 对 话 框 中 各 个 参数 的 功能 如 下 : 

“图 像 ”: 该 列表 框 中 显示 当前 文档 窗口 中 所 有 的 图 像 名 ， 从 中 选择 一 幅 图 像 作为 变 
换 之 前 的 图 像 。 

“ 设 定 原始 档 为 ”: 设置 替换 图 像 。 

“预先 载 入 图 像 ”: 变换 的 图 像 在 打开 网 页 时 载 入 到 计算 机 的 绥 冲 区 中 。 

“鼠标 滑 开 时 恢复 图 像 ”: 将 鼠标 从 图 像 上 移 开 后 ， 显 示 原 图 像 。 

(4) 单 击 “确定 ”按钮 ， 然 后 为 动作 选择 所 需 的 事件 。 

为 页 面 对 象 添加 “交换 图 像 ” 行 为 之 后 ，Dreamweaver 将 自动 为 页 面 对 象 添加 “恢复 
交换 图 像 ” 行 为 。 
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四 中 元 中 六 本 
国 | 隐 标 省 开打 低 划 闸 示 


图 10-10 “交换 图 像 ” 对 话 框 


和 注意 : 
a 由 于 只 有 src 属性 受 此 动作 的 影响 ， 所 以 应 该 换 入 一 个 与 原 图 像 尺 寸 ( 高 
度 和 宽度 ) 相同 的 图 像 。 否则 ， 换 入 的 图 像 显 示 时 会 被 压缩 或 扩展 ， 以 使 其 适应 原 图 
像 的 尺寸 。 


10.5.3 弹出 信息 


“弹出 信息 ”动作 显示 一 个 珊 有 指定 消息 的 JavaScript 和 警告。 因为 JavaScript 警 告 只 有 一 
个 “确定 ”按钮 ， 所 以 使 用 此 动作 可 以 提供 信息 ， 而 不 能 为 用 户 提 供 选 择 。 
下 和 面 渤 示 使 用 “ 强 出 信息 ”动作 的 步 又 。 
01 选择 一 个 对 象 ， 例 如 页 耐 中 的 一 张 图 片 ， 然 后 打开 “行为 ”和 面板。 
02 朋 单 击 行为 面板 上 的 “添加 行为 ”按钮 直 。， 并 从 动作 弹出 菜单 中 执行 “弹出 信息 ” 
命令 ， 弹 出 图 10-11 所 示 的 “弹出 信息 ”对 话 框 。 


TPR es 
| 加油 | 


Cw | 


图 10-11 “弹出 信息 ”对 话 框 


03 在 “消息 ”文本 域 中 输入 需要 的 消 县 。 本 例 输 入 “出 水 区 其 ”。 
04 9 蛙 击 “确定 ”按钮 ,然后 在 “行为 ”面板 中 选择 所 需 的 事件 ,本 例 选 择 onMouseOver。 
05 保存 文档 ， 然 后 在 浏览 右 中 预 筑 效果 ， 如 图 10-12 所 示 。 


来 自 网 页 的 消息 


图 10-12 “弹出 信息 ”动作 的 效果 


i 话 框 中 的 “确定 ”按钮 即 可 关闭 对 话 框 。 


| == 提示 : “弹出 信息 ”行为 不 能 控制 JavaScript 警告 的 外 观 ， 这 是 由 访问 者 的 浏览 | 
器 决定 的 。 如 希望 对 消息 外 观 进行 更 多 控制 ， 可 以 考虑 使 用 “打开 浏览 器 窗口 ” 行为。: 
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10. 5.4 打开 浏览 器 窗口 


使 用 “打开 浏览 器 窗口 ”动作 在 打开 当前 网 页 的 同时 ， 还 可 以 再 打开 一 个 新 的 窗口 。 
此 外 ， 用 户 还 可 以 编辑 浏览 窗口 的 大 小 、 名 称 、 状 态 栏 、 采 单 栏 等 属性 。 

下 面 使 用 “打开 浏览 需 窗 口 ” 动 作 的 步骤 。 

0 久 在 页 面 中 选中 需要 添加 该 行为 的 对 象 ， 如 文本 “进入 百度 MP3 搜 索 ”， 然 后 打 
开 “ 行 为 ”面板 。 

02 肯 单 击 “行为 ”面板 上 的 it 按钮， 并 从 动作 弹出 式 菜 单 中 执行 “打开 浏览 器 窗口 ” 
命令 ， 弹 出 如 图 10-13 所 示 的 “打开 浏览 器 窗口 ”对 话 框 。 


打开 广 览 圳 窗口 


要 显示 的 VRL: | 
人 
属性 : 口 导航 工具 栏 口 菜单 条 
口 地 址 工具 栏 中 需要 时 使 用 滚动 条 
口 状态 栏 口 调整 大 小 手柄 


窗口 名 称 : 


图 10-13 “打开 浏览 器 窗口 ”对 话 框 


03 对 该 对 话 框 中 各 个 参数 进行 设置 ， 该 对 话 框 中 各 个 参数 的 功能 如 下 : 

“要 显示 的 URL”: 需要 显示 的 文件 的 URL 地 址 。 本 例 输 入 http://mp3.baidu.com/。 

“窗口 宽度 ”: 用 于 设置 打开 的 浏览 器 窗口 的 宽度 。 本 例 设 置 为 400。 

“窗口 高 度 ”: 用 于 设置 打开 的 浏览 颖 窗口 的 高 度 。 本 例 设置 为 300。 

“属性 ”: 用 于 设置 打开 的 浏览 器 窗口 的 些 显示 属性 ， 它 有 6 个 选项 ， 可 以 选中 其 
中 的 一 个 或 多 个 显示 特性 。 本 例 选 中 全 部 属性 选项 。 

“窗口 名 称 ”: 为 打开 的 浏览 器 窗口 指定 一 个 名 字 。 本 例 设 置 为 “百度 MP3”。 

04 几 单 击 “ 确 定 ” 按 钮 ， 然 后 为 该 动作 选择 所 需 的 事件 。 本 例 选 择 onClick。 

05 保存 文档 。 在 浏览 堪 中 预览 行为 的 效果 ， 如 网 10-14 上 所 示 。 


地 全 号 


本 进入 百度 MP3 搜 索 


图 10-14 “打开 浏览 幽 窗口” 动作 的 效 来 


10.5.5 拖 动 AP 元 素 


使 用 “ 拖 动 AP 元 索 ” 动 作 可 以 让 浏览 者 在 一 定 的 范围 内 任意 拖 动 AP 元 系 。 使 用 此 动 
作 ， 可 以 创建 拼图 游戏 、 滑 块 控件 和 其 他 可 移动 的 界面 元 取 等 交互 式 效 来 。 
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下 面 省 示 “ 拖 动 AP 元 素 ” 的 操作 此 又 。 
01 选择 “插入 ”/“ 布 局 对 象 ”/“AP Div” 菜 单 命令 ;或 单 击 “ 布 局 ”面板 上 的 “ 绘 
制 APDiv” 按 钮 ， 然 后 在 页 面 中 按 下 鼠标 左 键 拖 出 一 个 矩形 ， 即 可 绘制 一 个 AP Div。 
02 将 光标 定位 于 AP 元 素 中 ， 在 其 中 插入 一 张 图 片 。 
03 单 击 “文档 ”窗口 左下 角 标 签 选择 占 中 的 <body> 标 签 。 
04 朋 打开 “行为 ”面板 ， 然 后 单 击 二 按钮 ， 从 动作 弹出 菜单 中 选择 “ 拖 动 AP 元 素 ” 
命令 ， 弹 出 钢 10-15$ 所 示 的 “ 拖 动 AP 元 素 ” 对 话 框 。 


二 元 素 : [div “apDivi” 总 


移动 : [ 示 限制 加 
放下 目标 : 左 :| ”| 上 :| ”| [到 往 目 前 位 置 
靠 齐 距离 : 像素 接近 放下 目标 


撞 动 控制 点 ， | 整 人 元 未“ 同 
拖 动 时 :加 ] 将 元 素 置 于 顶层 ， 然后 | 留 在 最 上 方 “加 | 
呼叫 JavaScript: | | 
放下 时 : 呼叫 JavaSeript: | | 四 只 有 在 靠 齐 时 


图 10-15 “ 拖 动 AP 元 素 ” 对 话 框 


“ 拖 动 AP 元 素 ” 对 话 框 由 “基本 ”和 “局 级 ”两 个 标签 组 成 。 

05 在 “AP 元 素 ” 下 拉 列 表 中 选择 要 附加 行为 的 AP 元 素 。 本 例 选 择 apDiv1， 即 本 
例 第 1 步 在 页 面 中 绘制 的 AP 元 素 的 名 称 。 

06 有 在 “移动 ”下 拉 列 表 中 指定 AP 元 素 的 移动 方式 。 本 例 选择 “限制 ”， 且 “上 ” 
下” “在 ”“ 右 ”分别 设 置 为 2830、600、50 和 400。 

如 果 选 择 “ 限 制 ”， 对 话 框 中 会 添加 “上 ”“ 下 ”“ 左 ”和 “ 右 ”4 个 参数 。 在 参数 
后 面 的 文本 框 中 项 入 数学 , 单位 是 像 系 , 即 确 定 了 了 AP 元素 的 拖 动 沁 围 , 这 些 值 是 相对 于 AP 
元 素 的 起 始 位 置 而 言 的 。 

对 于 滑 块 控 件 和 可 移动 的 布景 〈 例 如 文件 抽 屈 、 窗 帘 和 小 百叶 窗 ) ， 请 选择 “限制 ” 
Us “不 限制 ”移动 适用 于 拼 板 游 戏 和 其 它 拖 放 游戏 。 


' 和 “ 右 ”文本 框 中 输入 0; 若 要 只 允许 水 平移 动 ， 则 在 “ 左 ” 和 “ 右 ” 文 本 框 中 输入 
' 正 值 ， 注 “>” 和 We 文本 框 中 输入 0, 


人 = 提示 : 放 允许 重 直 移动 ， 则 在 wd 和 和 文本 框 中 输入 正 值 ， 在 J 


07 在 “放下 目标 ”区 域 指定 拖 放 的 目的 地 位 置 。 本 例 在 “ 左 ”“ 上 ” 文本 框 中 分 
别 输 入 300。 
“ 左 ” 和 “上 ”用 于 设置 拖 放 的 目的 位 置 距 页 面 左 端 和 上 端的 距离 ， 单 位 是 像素 。 当 
AP 元 素 的 左 坐 标 和 上 坐标 与 设置 的 “ 左 ” 和 “上 ” 框 中 输入 的 值 匹配 时 ， 便 认为 AP 元 
素 已 经 到 达 拖 放 目 标 。 这 些 值 是 与 浏览 右 窗 口 左 上 角 的 相对 值 。 
08 单 击 “取得 目前 位 置 ”按钮 可 以 在 文本 框 中 目 动 填充 AP 元 又 目前 的 位 置 人 参数 。 
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本 例 不 单 击 该 按钮 。 

09 在 “ 徘 齐 距 离 ” 石 侧 的 文本 框 中 设置 AP 元 素 目 动 吸附 到 目标 位 置 的 距离 。 较 大 
的 值 可 以 使 访问 者 较 容 易 找 到 拖 放 目标 。 本 例 设置 为 $0。 

对 于 简单 的 拼 板 游戏 和 布景 处 理 ， 到 此 步骤 为 止 即 可 。 大 要 定义 AP 元 素 的 拖 动 控制 
点 ， 在 拖 动 AP 元 素 时 跟踪 其 移动 ， 以 及 在 放下 AP 元 素 时 触发 动作 ， 则 需要 进入 “各 级 ” 
选项 卡 进 一 步 设置 。 

10 切换 到 “高 级 ”页 面 ， 在 “ 拖 搜 控制 点 ”下 拉 列 表 中 指定 访问 者 蛙 击 AP 元 素 可 
以 触发 动作 的 区 域 。 本 例 选 择 “ 整 个 元 素 ”。 

各 必须 单 击 AP 元 素 的 特定 区 域 才能 拖 动 AP 元 素 ， 则 选择 “元 到 内 的 区 域 ”， 并 
设置 该 区 域 的 “上 ”“ 下 ”“ 左 ”和 “ 右 ”; 知 希 望 单 击 AP 元 素 中 的 任意 位 置 残 可 以 拖 
动 此 AP 元 素 ， 则 选择 “整个 元 素 ”。 

1 由 在 “ 拖 动 时 ”区 域 选 中 “将 元 素 置 于 顶层 ” 复 选 枉 ， 即 AP 元 素 在 拖 动 时 始终 在 
最 上 层 。 
12 骨 在 “然后 ”下 拉 列 表 中 选择 拖 动 后 的 位 置 。 本 例 保 留 默认 设置 。 
“ 留 在 最 上 方 ” 表 示 将 AP 元 素 拖 动 后 ， 保 留 在 最 前 面 ，“ 恢 复 Z 轴 ”表示 将 其 恢复 
到 它 在 堆 欠 顺序 中 的 原 位 置 。 
13 在 “呼叫 JavaScript” 文 本 框 中 键入 拖 动 AP 元 素 时 要 执行 的 JavaScript 脚 本 程序 或 
函数 名 称 。 本 例 保 留 至 白 ， 即 不 调用 脚本 程序 。 
14 骨 在 “放下 时 ， 呼 叫 JavaScript” 文 本 框 中 键入 当 AP 元 素 被 移动 到 目标 位 置 时 调用 
的 JavaScript 脚 本 程序 或 函数 名 称 。 其 中 ， 选 中 “只 有 在 靠 齐 时 ”选项 ， 即 只 有 在 AP 元 素 
到 达 拖 放 目 标 时 才 执 行 该 JavaScript， 本 例 留 空 。 
15 9 单 击 “确定 ”按钮 关闭 对 话 框 ， 并 在 “行为 ”面板 中 选择 需要 的 触 友 事件 。 本 
例 使 用 默认 的 onLoad 事 件 。 
16 保存 文档 。 在 浏览 右 中 预览 该 行为 的 效果 ， 如 图 10-16 所 示 。 
在 图 像 上 任意 位 置 按 下 鼠标 左 键 ， 即 可 在 本 例 指 定 的 算 形 范围 内 随意 拖 动 多 像 。 


下 恒基 | nde EE 一 Br 


图 10-16 “ 拖 动 AP 元 素 ” 的 效 末 


10. 5.6  Spry 效 果 


Spry 效 末 可 以 修改 元 素 的 不 透明 度 、 缩 放 比例 、 位 置 和 样式 属性 《〈 如 背景 颜色 ) 等 ， 
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通常 用 于 在 一 段 时 间 内 高 忱 显示 信息 ,创建 动画 过 小 或 者 以 可 视 方 式 修 改 页 而 元素 。 由 于 
这 些 效 果 都 基于 Spry， 因 此 当 用 户 单 击 应 用 了 效果 的 对 象 时 ， 只 有 对 象 会 进行 动态 更 新 ， 
而 不 会 刷新 整个 HTML 页 面 。 
Spry 效 果 可 直接 应 用 于 使 用 JavaScript 的 HTML 页 面 上 几乎 所 有 的 元 了 票 ， 轻 松 地 回 
页 面 元 素 添加 视觉 过 渡 ， 而 无 需 其 他 自 定义 标签 。 如 果 要 问 某 个 元 素 应 用 效果 ， 该 元 素 当 
前 必须 处 于 选 定 状态 ， 或 者 它 必 须 具 有 一 个 有 效 的 ID。 如 果 访 元 素 未 选中 ， 且 没有 有 效 的 
ID 值 ， 则 需要 向 HTML 代码 中 添加 一 个 ID 值 。 
下 面 通 演示 为 页 面 元 素 添 加 Spry 效 果 的 一 般 步 又。 
01 选择 要 应 用 效果 的 内 容 或 布局 对 象 ， 也 可 以 直接 进入 下 一 步 。 本 例 选 中 页 面 中 
插入 的 一 张 图 卢 。 
02 9 蛙 击 行为 面板 中 的 按钮 ， 从 弹出 采 单 中 选择 “效果 ”， 并 选择 效果 子 采 时 中 
需要 的 效果 名 称 。 本 例 选 择 “ 增 大 /收缩 ”选项 ， 弹 出 图 10-17 所 示 的 “ 增 大 /收缩 ”对 话 框 。 


目标 元 未 :| | 
效果 持续 时 间 :[1000 | 毫秒 
效果 :| 收编 加 


收缩 自 : [i100 ||% v| 

收缩 到 : D ||% v| 

收缩 到 : | 居中 对 齐 (C) v 
口 ] 切换 效果 


图 10-17 “ 增 大 /收缩 ”对 话 杠 


03) 从 “目标 元 系 ” 亲 单 中 选择 要 应 用 效果 的 对 象 的 ID。 如果 已 经 选择 了 一 个 对 和 象 ， 
请 选择 “< 当前 选 定 内 容 >”。 本 例 选 择 “< 当 前 选 定 内 容 >”。 

04 在 “效果 持续 时 | 间 ” 文 本 框 中 指定 效果 持续 的 时 间 ， 单 位 为 又 秒 。 本 例 使 用 默 
认 设 置 (1000 毫 秒 )。 

05 几 在 “效果 ”后 的 下 拉 列 表 框 中 选择 要 应 用 的 效果 。 本 例 选 择 “ 增 大 ”。 

06 分 别 在 “ 增 大 目 ” 和 “ 增 大 到 ”文本 框 中 ， 以 百分比 大 小 或 像素 值 指 定 对 象 在 
效果 开始 时 和 结束 时 的 大 小 。 本 例 分 别 输入 80%、120%。 

07 在 “ 增 大 日 ”列表 框 中 选择 元 素 增 大 的 位 置 ， 可 以 是 页 面 的 左上 角 或 是 页 面 的 
中 心 。 本 例 选 择 “ 居 中 对 齐 ”。 

08 如 果 和 希望 连续 单 击 可 以 在 增 大 或 收缩 间 切 换 ， 选 中 “切换 效果 ” 复 选 枉 ， 本 例 
选中 此 复 选 框 。 

09 单 击 “确定 ”按钮 关闭 对 话 框 。 保 存 文档 ， 并 在 浏览 器 中 预览 效果 ， 如 图 10-18 
所 示 。 


图 10-18 “ 增 大 / 收 缅 ”效果 
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初始 时 ， 图 片 以 “ 增 大 自 ” 文 本 框 中 的 80% 显 示 ， 在 图 片上 单 击 鼠 标 ， 则 以 “ 增 大 到 ” 
文本 框 中 指定 的 120% 显 示 。 再 次 里 击 也 标 ， 回 复 到 80% 显 示 。 

下 面 徐 要 介绍 一 下 Dreamweaver CS6 中 几 种 常用 的 Spry 效 果 的 功能 、 使 用 郊 围 和 具体 
参数 的 设置 方法 。 

1. 增 大 / 收 纵 “” 该 效 末 使 元 素 变 大 或 变 小 ,适用 于 address、dd、div、dl、dt\、form、Pp、 
ol、ul、applet、center、dir、menu 或 pre 对 象 。 

2. 挤 压 该 效 末 使 元 么 从 页 面 的 左上 角 消 失 , 仅 适 用 于 address、dd、div、dl、 dt、 form、 
img 、p、ol、ul、applet、center、dir、menu 或 pre 对 象 。 

3 显示 / 淹 隐 使 元 素 显 示 或 渐 隐 。 此 效 末 适用 于 除 applet、body、iframe、object、 
ttr、tbody 或 也 以 外 的 所 有 HTML 对 象 。 

在 “ 渐 隐 目 / 显 示 目 ”文本 框 中 定义 显示 此 效果 所 需 的 不 透明 度 百 分 比 。 

在 “ 渐 隐 到 /显示 到 ”文本 框 中 设置 要 渐 隐 到 的 不 透明 上 度 百 分 比 。 

如 果 选 择 “ 切 换 效 果 ”， 则 该 效果 是 可 逆 的 ， 即 连续 单 击 可 从 “ 渐 隐 ”转换 为 “显示 ?” 
或 从 “显示 ”转换 为 “ 渐 隐 ”。 

4 晃动” 该 效果 模拟 从 左 癌 右 哆 动 元 素 ， 仅 适用 于 address、blockquote、dd、div、 
dl、dt、fieldset、form、hl、h2、h3、h4、h5S、h6、iframe、1i1mg、object、p、ol、 ul、 i、 
applet、dir、hr、menu、pre 或 table 对 象 。 

5. 滑动 ” 问 上 或 癌 下 移动 元 素 。 仅 适用 于 blockquote、dd、div、form 或 center 对 象 。 
背 动 效果 要 求 在 要 滑动 的 内 容 周 用 有 一 个 <div> 标签 。 

分 别 在 “上 滑 目下 滑 自 ”和 “上 滑 到 /下 背 到 ”文本 框 中 ， 以 百分比 或 像素 值 形式 定 
义 起 始 请 动 点 和 结束 滑动 点 。 

如 果 和 希望 通过 连续 单 击 实现 上 下 请 动 ， 则 选中 “切换 效果 ”。 

6. 遮 窒 ”该 效 末 模拟 百叶 窗 效 素 ， 问 上 或 回 下 滚动 百叶 窗 来 隐 关 或 显示 元 素 。 仅 适 
用 于 address、dd、div、dl、 dt、 form、hl、h2、h3、h4、h5、h6、p、ol、ul、]li、applet、 
center、dir、menu 或 pre 对 象 。 

在 “同上 迟 帘 目 / 回 下 让 帘 目 ”文本 框 中 ， 以 百分比 或 像素 值 形式 定义 避 帘 的 起 始 深 动 
上 点。 这些 值 是 从 对 象 的 项 部 开始 计算 的 。 

在 “ 问 上 遮 帘 到 /加 下 这 帘 到 ” 域 中 ， 以 百分比 或 像素 值 形式 定义 性 帘 的 结束 滚动 点 。 
这 些 值 是 从 对 象 的 项 部 开始 计算 的 。 

如 采 硕 望 连续 单 击 实现 上 下 滚动 ， 则 选择 “切换 效 末 ”。 

7. 高 亮 疝 色 ”该 效果 可 以 更 改元 素 的 背景 闫 色 , 适用 于 applet body、frame、frameset 
或 noframes 以 外 的 所 有 HTML 对象。 在 “起 始 颜色 ”和 “结束 颜色 ”后 面 的 颜色 井中 


分 别 选择 开始 高 亮 显示 、 结 束 高 亮 显示 的 颜色 。 
\ 注意 : 
3 当 使 用 效果 时 ， 系 统 会 在 代码 视图 中 将 不 同 的 代码 行 添加 到 您 的 文件 中 


其 中 的 一 行 代码 用 来 标识 SpryEffects.js 文件 ， 该 文件 是 包括 这 些 效果 所 必需 的 。 请 
不 要 从 代码 中 删除 该 行 ， 否 则 这 些 效果 将 不 起 作用 。 
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在 “应 用 效 末 后 的 颜色 ”后 面 的 颜色 状 中 选择 该 对 象 在 完成 局 涡 显 示 之 后 的 凑 色 。 
如 果 布 望 通过 连续 单 击 来 循环 使 用 高 完 赢 色 ， 则 选择 “切换 效 末 ”选项 。 
和 其 他 行为 一 样 ， 可 以 将 多 个 效果 行为 与 同一 个 对 象 相关 联 以 产生 有 趣 的 结 


10. 5. 7 显示 -隐藏 元 素 


“显示 - 隐 苞 元素 ”动作 用 于 显示 、 隐 藏 或 恢复 一 个 或 多 个 页 面 元 素 的 默认 可 见 性 。 此 
动作 用 于 在 用 户 与 页 面 进行 交互 时 显示 信息 。 例 如 ， 当 用 户 将 鼠标 指针 滑 过 一 个 人 物 的 图 
像 时 ， 可 以 显示 一 个 包含 有 关 该 人 物 的 姓名 、 人 性 别 、 年 龄 和 星座 等 详细 信息 的 页 面 元 素 ， 
还 可 用 于 创建 预先 载 入 页 面 元 素 ， 即 一 个 最 初 挡住 内 容 的 较 大 的 页 面 元 际 ， 在 所 有 页 组 件 
都 完成 载 入 后 该 页 面 元 素 即 消失 。 

下 面 活 示 使 用 “显示 -隐藏 元 孙 ” 动 作 的 一 般 步 又 。 

019 狐 建 一 个 HITML 文 档 。 在 页 面 中 插入 两 张 图 片 ， 并 在 属性 面板 中 分 别 为 图 刻 命 
名 为 happy 和 和 tree， 如 图 10-19 所 示 。 选 择 其 中 一 个 对 象 ， 如 本 例 中 的 happy， 然 后 打开 “ 行 
为 ”和 面板 。 

02 9 单 击 行为 面板 上 的 过 = 按钮 ， 并 从 动作 弹出 式 末 单 中 执行 “显示 -隐藏 元 素 ” 合 令 ， 
弹出 “显示 -隐藏 元 素 ” 对 话 框 ， 如 图 10-20 所 示 。 

“元 素 ”: 在 列表 框 中 列 出 所 有 可 用 元 取 的 名 称 以 供 选 择 。 

“显示 ”: 蛙 击 此 按钮 ， 则 选中 元 素 可 见 。 

“隐藏 ”: 单 击 此 按钮 ， 则 选中 元 素 不 可 见 。 

“默认 ”: 单 击 此 按钮 ， 则 按 的 认 值 决定 元 素 是 售 可 见 ， 一 般 是 可 见 。 


图 10-19 ”页 面 中 插入 的 图 片 图 10-20 “显示 -隐藏 元 素 ” 对 话 框 


03 选中 元 素 img “happy”， 并 单 击 “ 隐 藏 ”按钮 ， 然 后 单 击 “ 确 定 ” 关 闭 对 话 框 。 
04 在 “行为 ”面板 中 为 该 动作 选择 事件 。 本 例 选 择 onMouseOver。 


05 呈 在 “设计 ” 视 几 中 选中 风衣 tree， 然 后 单 击 行为 面板 上 的 至 = 按钮 ， 从 动作 弹出 式 


菜单 中 执行 “显示 -隐藏 元 素 ” 命 令 ， 弹 出 “显示 -隐藏 元 素 ” 对 话 框 。 
06 选中 元 素 img “happy”， 并 单 击 “ 显 示 ” 按 钮 。 然 后 单 击 “确定 ”关闭 对 话 框 ， 
在 “行为 ”面板 中 为 该 动作 选择 事件 。 本 例 选 择 onMouseOver。 


07 昌 保持 图 片 tee 的 选中 状态 ， 然 后 单 击 行为 面板 上 的 过 按钮， 从 动作 弹出 式 荣 单 


中 执行 “显示 - 隐 纪 元素 ”命令 ， 弹 出 “显示 - 隐 蔚 元 素 ” 对 话 框 。 

08 选中 元 素 img “happy”， 并 单 击 “隐藏 ”按钮 。 然 后 单 击 “ 人 确定 ”关闭 对 话 框 ， 
在 “行为 ”面板 中 为 该 动作 选择 事件 。 本 例 选择 onMouseOut。 

09 旧 保存 文档 。 按 F12 键 在 浏览 右 中 预览 图 片 效果， 如 图 10-24 所 汞 。 
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图 10-21 “显示 - 隐 蔚 元 素 ” 效 果 


最 开始 ， 页 面 上 的 两 张 独 户 都 显示 ;将 鼠标 移 到 网 户 happy 上 时 ， 访 图 诱 隐藏， 将 鼠 
标 移 a 到 图 片 tee 上 时 ， 图 片 happy 显 示 ; 将 豚 标 从 图 片 tee 上 移 开 ， 图 片 happy 青 次 隐 沁 。 


10. 5.8 检查 插件 


如 果 在 站 点 的 网 页 中 使 用 了 某 些 插件 技术 ， 如 Flash、Windows Media Player 等 ， 应 通 
过 “ 检 答 插件 ”动作 检查 用 户 的 浏览 器 中 是 否 安 闻 了 相应 的 插件 。 如 末 安 装 了 这 些 插件 ， 
则 浏览 器 目 动 跳 转 到 含有 访 插 件 技术 的 网 页 中 ;如 采 没 有 安 疤 这 些 插件 ， 则 不 进行 跳 转 或 
路 转 到 另 一 个 网 页 。 

使 用 “ 检 奉 插件 ”动作 的 步骤 如 下 : 

(1) 选择 一 个 页 面 对 象 并 打开 “行为 ”面板 。 

(2) 单 击 “ 添 加 行为 ”按钮 二 。， 并 从 动作 弹出 式 菜 单 中 执行 “检查 插件 ”命令 ， 弹 
出 图 10-22 所 示 的 “检查 插件 ”对 话 框 。 


插件 : @@ 选择 : |Flas 


C 〇 输入 : 
如 果 有 ， 转 到 VRL: | iit) 


否则 , 转 到 WRL: | 
口 如 果 无 法 检测 ， 则 始终 转 到 第 一 个 URL 


图 10-22 “ 检 奏 插件 ”对 话 框 


(3) 对 该 对 话 框 各 个 选项 进行 设置 。 该 对 话 框 中 各 个 选项 的 功能 如 下 : 

“选择 ”: 选择 需要 检查 的 插件 。 

“输入 ”: 输入 插件 的 类 型 。 

“如 果 有 ， 转 到 URL”: 如 果 找 到 前 面 设置 的 插件 类 型 ， 则 跳 转 到 后 面 文本 框 中 设 定 
的 网 页 。 

“个 则 ， 转 到 URL”: 如 条 没有 找到 前 面 设 置 的 插件 类 型 ， 则 跳 转 到 后 面 文本 框 中 设 
定 的 网 页 。 大 要 让 不 具有 该 插件 的 访问 者 留 在 同一 页 上 ， 则 将 此 莽 留 守 。 

“如 果 无 法 检测 ， 则 始终 转 到 第 一 个 URL”: 如 果 不 能 进行 检查 插件 ， 则 跳 转 到 第 一 
个 URL 地 址 设 定 的 网 页 。 

Macintosh 上 的 ”Internet Explorer 中 不 能 实现 插件 检测 ，Windows 上 的 Internet 
Explorer 中 也 检测 不 到 大 多 数 插件 ， 因 此 此 选项 只 适用 于 Internet Explorer。Netscape 
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Navigator 总 是 可 以 检测 到 插件 。 
(4) 设置 完毕 ， 单 击 “ 确 定 ” 按 钮 ,然后 为 动作 选择 所 需 的 事件 。 


10. 5. 9 检查 表单 


“检查 表单 ”动作 检查 指定 文本 域 的 内 容 以 确保 用 户 和 输入 了 正 磺 的 数据 闫 型 。 使 用 
onBlur 事 件 将 此 动作 附加 到 单个 文本 域 ， 在 用 户 填 写 表 单 时 对 表单 对 象 的 值 进行 检 栓 ; 或 
使 用 onSubmit 事 件 将 其 附加 到 表单 ， 在 用 户 单 击 “ 确 定 ” 按 钮 时 ， 同 时 对 多 个 文本 域 进 行 
检查 。 将 此 动作 附加 到 表单 , 防止 表单 提交 到 服务 器 后 任何 指定 的 文本 域 包含 无 效 的 数据 。 

下 面 污 示 使 用 “检查 表单 ”动作 的 一 般 步 又 。 

019 打开 一 个 含有 表单 的 HTML 页 面 ， 选 中 表单 ， 并 打开 “行为 ”面板 。 

025 单 击 “ 行 为 ”面板 上 的 “添加 行为 ” 投 钮 各， 从 弹出 菜单 中 执行 “检查 表单 ” 
命令 ， 打 开 图 10-23 所 示 的 “检查 表 蛙 ”对 话 框 。 

“ 域 ”: 在 列表 框 中 列 出 可 用 的 所 有 域名 供 选 择 设 置 。 

“必需 的 ”: 表单 对 象 必 须 填 有 内 容 ， 不 能 为 空 。 

“任何 东西 ”: 表单 对 象 是 必需 的 ， 但 不 需要 包含 任何 特定 类 型 的 数据 。 

如 果 没 有 选择 “必需 的 ”选项 ,， 则 该 选项 就 无 意义 了 ,也 就 是 说 它 与 该 域 上 未 附加 “ 检 
但 表单 ”动作 一 样 。 


“数字 ”: 检查 该 域 是 合 上 只 包 
能 


单 对 象 内 是 合 包 侣 一 个 @ 符号 。 
输入 指定 范围 的 数字 。 


“电子 邮件 地 址 ”: 检 得 该 
“数字 从 ”表单 对 象 内 只 


值 : 器 必需 的 


可 接受 : ”任何 东西 C 〇 数字 
〇 电子 邮件 地 址 〇 数字 从 | | 


图 10-23 “检查 表单 ”对 话 框 


03 在 “ 域 ” 中 选中 password， 然 后 勺 选 “ 必 需 的 ”， 并 在 “可 接受 ”区 域 选 择 “ 任 
何 东 西 ” 选 项 。 

04 在 “ 域 ” 中 选择 year, 然后 勾 选 “必需 的 ”， 并 在 “可 接受 ”区 域 选中 “数学 从 ”， 
范围 为 1900 到 2012。 

05 在 “ 域 ” 中 选择 day， 然 后 勾 选 “必需 的 ”， 并 在 “可 接受 ”区 域 选 中 “数字 从 ”， 
范围 为 1 到 31。 

06 在 “ 域 ” 中 选择 idcard， 然 后 勺 选 “必需 的 ”,， 并 在 “可 接受 ”区 域 选 中 “数字 ”。 

07 在 “ 域 ” 中 选择 text， 然 后 勾 选 “必需 的 ”， 并 在 “可 接受 ”区 域 选中 “任何 东 
西 ” 选 项 。 

08 单 击 “ 确 定 ” 关闭 对 话 框 ， 然 后 保存 文档 , 在 浏览 右 中 预览 页 面 效 果 ,， 如 图 10-24 
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DrecERRER LO 中立 县 入 门 与 提高 实例 箱 E 


请 填写 个 人 资料 : 


个 人 说 明 : 


个 人 声明 
我 愿意 其 他 人 可 以 搜索 到 我 的 如 下 信息 : 思 姓名 ， 联 系 方式 口 其 他 已 登记 的 信息 


图 10-24 “检查 表单 ”行为 的 效 末 


如 东 “ 密 但 ” 域 为 衬 ; 出 生日 期 的 “年 ”不 在 1900 至 2012 之 间 ，“ 日 ”不 是 1 至 31 间 
的 数学 ; 喘 份 证 号 但 不 是 全 为 数字 ， 则 提交 表单 时 ， 会 弹出 一 个 如 网 10-77 所 示 的 警告 对 话 
框 ， 列 出 所 有 错误 的 信息 ， 并 取消 提交 表单 。 

在 Dreamweaver CS6 中 ， 利 用 Adobe 预 制 的 表单 验证 组 件 ， 如 Spry 验 证 文本 域 、Spry 验 
证 复 选 枉 、Spry 验 证 选择 等 构件 ， 新 手 或 是 对 编程 提 不 起 兴趣 的 用 户 也 可 轻松 快捷 地 检 奉 
表单 ， 构 建 AJAX 页 面 。 


10. 5. 10 “设置 文本 


“设置 文本 ”动作 可 以 动态 设置 框架 、 容 器 、 状 态 栏 、 文 本 域 中 的 内 容 。 它 有 4 个 子 
沫 单 ， 分 别 对 应 者 4 种 切换 方式 。 

1. 设置 容器 的 文本 ”用 于 设置 页 面 上 的 现 有 容器 《〈 即 可 以 包含 文本 或 其 它 元 素 的 任 
何 元 素 ) 的 内 容 和 格 坏 进 行动 态 变 化 “但 保留 容器 的 属性 ， 包 括 颜 色 ) ， 在 运 当 的 触发 事 
件 触发 后 在 某 一 个 窗口 中 显示 新 的 内 容 ， 该 内 容 可 以 包括 任何 有 效 的 HTML 源 代码 。 

下 面 演 示 使 用 “设置 容器 的 文本 ”动作 的 一 般 步 又 。 

0 全 选 择 一 个 容 融 对 象 ， 例如 图 10-26 左 图 中 的 AP 元 素 apDiv1, 并 打开 “行为 ”面板 。 

02 目 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 地， 并 从 动作 弹出 式 菜单 中 执行 “ 设 
置 文本 ”/“ 设 置 容器 的 文本 ”命令 ， 弹 出 “设置 容器 的 文本 ”对 话 框 ， 如 图 10-25 所 示 。 


图 10-25 “设置 容 融 的 文本 ”对 话 杠 


.03 在 “ 容 右 ”下拉 列 表 中 选择 内 容 要 进行 动态 变化 的 容器 。 本 例 选 中 div“apDiv1”。 
04 在 “ 源 建 HIML” 域 中 设置 要 在 当前 容器 中 新 加 入 的 内 容 。 本 例 输入 <font size=4 
208 


colorEEresh> 这 是 一 个 没 置 了 行为 的 AP ! </font>。 py 


在 该 文本 框 中 可 输入 任何 有 效 的 HTML 语 句 、JavaScript 函数 调用 、 属 性 、 全 局 变量 


或 其 它 表 达 式 ， 这 些 内 容 将 代 窟 原来 该 容 右 中 的 内 容 。 帮 要 髓 入 一 个 JavaScript 表达 式 ， 
应 将 其 放置 在 大 括号 〈{f} ) 中 。 寿 要 显示 大 括号 ， 则 在 它 前 面 加 一 个 反 斜 杠 (\{〉 。 这 个 
规则 也 同样 适用 于 其 余 3 种 文本 类 动作 。 

中 05 朋 单 击 “确定 ” 按 钮 关闭 对 话 框 ， 并 在 “行为 ”面板 上 为 动作 选择 所 需 的 事件 。 本 
例 选 择 onMouseOver。 

有 06 保存 文档 。 在 浏览 器 中 预览 页 面 效 果 ， 如 图 10-26 所 示 。 


击 ... st\enio\io. 5.10-1 该 登 检 器 文本 . html (XKHTL] 冰 ln 二 .st\enio\io. 5.10-1 该 嫩 春 器 文本 . html (XHTNIL)* 


10-26 “设置 容 堪 的 文本 ”动作 的 效 来 


当 把 鼠标 移 到 AP 元 素 所 在 的 区 域 时 ,导航 栏 图 像 变 为 指定 的 文本 ,并 以 指定 的 大 小 和 
颜色 显示 。 

2. 设置 文本 域 文 字 ” 可 以 动态 地 和 更改 文 本 域 中 的 内 容 。 例 如 单 击 一 个 图 像 或 按钮 ， 
其 指定 的 文本 域 的 内 容 发 生 了 、 改 变 。 使 用 本 行为 之 前 必须 先 插入 文本 域 表 单 对 象 。 

下 面 演示 “ 议 置 文本 域 文字 ”的 一 般 使 用 步骤 。 

和 019 新 建 一 个 HTML 文 档 。 在 文档 中 插入 一 张 表单 和 一 个 文本 字段 ， 并 在 属性 面板 
上 将 文本 域 命名 为 textfield， 青 插入 一 张 图 片 。 选 中 图 片 ， 并 打开 “行为 ”和 面板， 此 时 的 页 
面 效 果 如 图 10-27 所 示 。 


图 10-27 初始 页 面 效果 


002 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 世 ， 在 弹出 的 行为 菜单 中 选择 “设置 
文本 ”/“ 设 置 文本 域 文字 ”行为 ， 打 开 如 图 10-28 所 示 的 “设置 文本 域 文学 ”对 话 框 。 

二 03 在 “文本 域 ” 中 选中 内 容 将 动态 变化 的 文本 域 。 本 例 选中 input “textfield”。 

04 在 “新 建文 本 ”文本 域 中 输入 将 在 文本 域 中 显示 的 内 容 。 本 例 输入 Merry 


Christmas* 人 ^O^*。 
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05 和 单 击 “确定 ”按钮 天 财 对 话 框 ， 并 在 “行为 ”面板 上 设置 触发 该 动作 的 事件 。 本 
例 使 用 默认 事件 onClick。 

06 保存 文档 。 按 下 Fl12 键 预览 效果 ， 如 图 10-29 所 示 。 单 击 图 片 ， 文 本 域 中 将 显示 
指定 的 Merry Christmas*^O^*。 


二 
加 无 标题 文档 - 做 游 IMaxthon] QO 
文件 !E) ”编辑 ([E) ”查看 ( 芒 ” 收 藏 (名 ”快捷 组 位 
地 址 ”总 | http:jilocalhosti 设 置 交 本 ,html 阿 EE 


看 这 里 : Nerry Christmas**O* 


input “textfield” 


点 击 圣诞 树 | 


学 欢迎 使 用 微 游 浏 览 器 Maxthon), 以 下 小 贴 十 将: 名 0. 忆 


图 10-28 “设置 文本 域 文字 ”对 话 框 图 10-29 “设置 文本 域 ” 动 作 的 效 末 


3. 设置 框架 文本 ”用 于 设置 框架 内 容 的 动态 变化 , 可 以 动态 地 替换 一 个 框架 的 <body> 
标记 内 的 全 部 代码 文本 。 
下 面 演示 使 用 “设置 框架 文本 ”动作 的 一 般 步 又 。 
019 新 建 一 个 HTML 文档 。 执 行 “插入 ”/“HTML”/“ 框 架 ”/“ 上方 及 左 侧 拒 套 ” 
染 单 命令 ， 插 入 一 个 框架 集 ， 并 在 框架 中 输入 内 容 。 
02 将 光标 定位 在 mainframe 区 域 ， 单 击 “ 文 档 ” 窗 口 左下 角 的 <body> 标 记 ， 并 打开 
“行为 ”面板 。 单 击 “ 行 为 ”面板 上 的 加 号 (+) 按钮 ， 并 从 动作 弹出 式 菜单 中 执行 “ 设 
置 文本 ”/“ 设 置 框架 文本 ”命令 ， 弹 出 图 10-30 所 示 的 “设置 框架 文本 ”对 话 框 。 


保留 青 景色 


图 10-30 “设置 框架 文本 ”对 话 框 


03 在 “框架 ”下 拉 采 单 中 选择 内 容 将 动态 变化 的 框架 。 本 例 选 择 topFrame。 

04 和 在 “新 建 HTML” 文 本 域 中 输入 任何 的 HTML 语 句 以 及 JavaScript 代 码 。 本 例 输 
入 JavaScript 语 句 : 今天 是 {new Date(})。 

05) 单 击 “ 获 取 当 前 HIML ”按钮 ， 则 当前 框架 的 内 容 会 以 HTML 代码 的 形式 显示 在 
“新建 HTML ”文本 域 中 。 本 例 不 单 击 该 按钮 。 

06 选中 “保留 背景 色 ” 复 选 框 ， 则 保留 该 框架 以 前 设置 的 背景 闫 色 和 文本 闫 色 ， 
本 例 选 中 此 项 。 

07 单 击 “ 确 定 ” 投 钮 关闭 对 话 框 ， 然 后 在 “行为 ”面板 上 为 该 动作 指定 触发 的 事 
件 。 本 例 使 用 默认 事件 onMouseOver。 

08 保存 文档 = 在 浏览 器 中 预览 页 面 效 果 ， 如 网 10-31 所 示 。 当 把 鼠标 移 到 mainframe 
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区 域 时 ，topframe 区 域 将 显示 指定 的 JavaScript 代 公 执 行 的 结果 。 


图 10-31 “设置 框架 文本 ”行为 的 效果 


4. 设置 状态 栏 文本 “用 于 设置 浏览 器 窗口 状态 栏 显示 的 信息 。 在 默认 情况 下 ， 当 访 
问 者 在 浏览 过 程 中 将 鼠标 移动 到 超级 链接 上 时 ， 在 状态 栏 中 显示 的 是 链接 的 地 址 。 使 用 这 
个 动作 可 以 改变 这 种 默认 设置 ， 使 网 页 更 加 丰富 多 彩 、 吸 引 更 多 的 访问 者 。 

“设置 状态 栏 文本 ”动作 与 “弹出 信息 ”动作 的 作用 很 相似 。 不 同 的 是 ， 如果 使 用 “ 弹 
出 消息 ”动作 显示 文本 ， 访 问 者 必须 单 击 “ 确 定 ”按钮 后 才 可 以 继续 浏览 网 页 中 的 内 容 。 
而 在 状态 栏 中 显示 的 文本 信息 不 会 影响 访问 者 的 浏览 

使 用 “设置 状态 栏 文本 ”动作 的 步骤 如 下 : 

C1) 选择 一 个 页 面 对 象 ， 并 打开 “行为 ”面板 。 

(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 EJ， 并 从 动作 弹出 式 菜单 中 执行 “ 设 
置 文本 ”/“ 设 置 状 态 栏 文本 ”命令 ， 弹 出 图 10-32 所 示 “ 设 置 状 态 栏 文本 ”对 话 框 。 


消息 : | 
注意 : 并 非 所 有 浏 持 更 改 状态 栏 交 本 ， 某 些 浏览 
定 功能 。 


有 浏览 器 都 去 7 
器 会 根据 用 户 首选 参数 来 确定 是 亩 允许 开动 


图 10-32 “设置 状态 栏 文本 ”对 话 框 


(3) 将 需要 在 状态 栏 中 显示 的 信息 输入 到 “消息 ”文本 框 中。 
(4) 早 击 “ 硝 定 ” 按 钮 ， 然 后 为 动作 选择 触发 的 事件 。 


10. 5. 11 调用 JavaScr ipt 


JavaScript 是 一 种 描述 性 的 语言 ， 可 以 被 欣 入 到 HTML 文 件 中 。 使 用 JavaScript， 可 以 啊 
应 用 户 的 需求 事件 ， 而 不 用 任何 的 网 络 途 径 来 回 传 输 资 料 。Dreamweaver CS6 中 的 行为 和 
AJAX 框 架 Spry 束 是 将 JavaScript 代 人 码 放置 在 文档 中 ， 以 允许 访问 者 与 Web 页 进行 交互 ， 从 
而 以 多 种 方式 更 改 页 面 或 引起 某 些 任务 的 执行 。 

“调用 JavaScript ”动作 束 是 当 发 生 某 个 事件 时 执行 预先 编写 好 的 一 个 JavaScript 函 数 或 

者 一 行 JavaScript 代 人 码 。JavaScript 代 人 码 可 以 是 用 户 目 己 编写 的 或 使 用 Web 上 多 个 免费 
JavaScript 库 中 提供 的 代码 。 

“调用 JavaScript” 动作 的 使 用 方法 很 简单 。 例 如 , 选中 一 段 空 链 接 的 文本 , 然后 从 “ 行 

为 ”下 拉 来 单 中 选择 “调用 JavaScript ”命令 ， 在 弹出 的 “调用 JavaSeript ”对话 框 中 输入 如 
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半 世 网 了 于 三 I9AB3MUIR31G ” 址 01 梁 


3) Dreornwearer056 中 文 版 入 门 己 粮 言 实例 条 并 
dt 
下 内 容 : 


alert ("您 好 ! 欢迎 光临 HH 网 球 俱乐部 ! ") 
当 按 下 F12 键 在 浏 贤 融 中 进行 测试 时 , 触发 指定 的 动作 ， 即 会 弹出 提示 窗口， 显示 “您 
好 ! 欢迎 光临 HH 网 球 俱乐部 !" 


by 注意 : 


9 如 果 应 用 该 行为 时 没有 选择 对 象 ， 则 将 动作 应 用 到 <body> 标 签 ， 


10. 5. 12” 转 到 URL 


“ 转 到 URL” 行 为 的 网 页 满足 特定 的 触发 事件 时 ， 会 跳 转 到 特定 的 URL 地 址 ， 并 显示 
指定 的 网 页 。 

使 用 “ 转 到 URL” 动 作 的 步骤 如 下 : 

(1) 选择 一 个 页 面 对 象 ， 并 打开 “行为 ”面板 。 

(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 (HJ， 并 从 动作 弹出 式 菜 单 中 执行 “ 转 
到 URL” 命 令 ， 弹 出 “ 转 到 URL” 对 话 框 ， 如 图 10-33 所 示 。 

(3) 在 “打开 在 ”区 域 选择 网 页 打开 的 窗口 。 

团 认 窗口 为 “ 主 窗口 ”， 即 浏览 器 的 主 窗口 。 若 正在 编辑 的 网 页 中 使 用 了 框架 技术 ， 
如 有 多 个 窗口 ， 则 每 个 窗口 的 名 称 将 列 在 “打开 在 ”列表 框 中 ， 从 该 列表 框 可 选择 在 哪个 
口中 打开 网 页 。 


E 


] 


图 10-33 ” “ 转 到 URL” 对 话 框 


区 注意 


一 如 果 将 框架 命名 为 top、blank、self 或 parent， 则 此 动作 可 能 产生 意 想 不 
到 的 结果 。 浏 览 器 有 时 将 这 些 名 称 误 认为 保留 的 目标 名 称 。 设 置 对 话 框 中 各 个 选项 ， 


(4) 在 “URL” 文 本 框 中 输入 要 打开 的 网 页 地 址 ， 或 单 击 “ 浏 览 ” 按 钮 定位 到 需要 
的 文件 。 
(5) 里 击 “确定 ”按钮 关闭 对 话 杠 。 然 后 为 动作 选择 触发 事件 。 


10. 5. 13 ”预先 载 入 图 像 


经 和 常 在 网 上 浏览 的 用 户 ， 如 果 使 用 的 是 一 般 的 Modem 上 网 ， 感受 最 深 的 当然 是 显示 图 
像 时 的 漫长 等 每 。 利 用 Dreamweaver CS6 目 带 的 “预先 载 入 网 像 ”动作 ， 可 以 使 图 像 的 下 
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载 时 间 明 显 加 快 ， 有 效 地 防止 图 像 由 于 下 载 速度 号 伯 的 显示 延 述 。 

(1) 选择 一 个 对 象 ， 并 打开 “行为 二 面板 。 

(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 直 ， 从 动作 弹出 式 染 单 中 执行 “预先 
载 入 图 像 ” 命 令 ， 弹 出 “预先 载 入 图 像 ” 对 话 框 ， 如 图 10-34 上 所 示 。 


十 | | 一 


是 国 


预先 载 和 图像: | 


图 像 源 交 件 : | | BK 


图 10-34 “预先 载 入 图 像 ” 对 话 框 


(3) 单 击 “ 浏 览 ” 按 钮 选择 要 预先 载 入 的 图 像 文 件 ， 或 在 “网 像 源 文件 ”文本 框 中 
输入 图 像 的 路 人 笃 和 文件 名 。 

(4) 单 击 对 话 框 顶部 的 “添加 项 ”按钮 时 将 图 像 添加 到 “预先 载 入 图 像 ” 列 表 中 。 

(5) 对 所 有 剩 下 的 要 预先 载 入 当前 页 的 图 像 重 复 第 3 步 和 第 4 步 。 

(6) 硅 要 从 “预先 载 入 图 像 ” 列 表 中 删除 条 个 图 人像， 则 在 列表 中 选择 该 图 像 ， 然 后 
单 击 “ 删 除 项 ” 按钮 里 。 

(7) 羊 击 “ 硝 定 ” 按 钮 ， 然 后 为 动作 选择 触发 事件 。 


| 提示 :如 果 在 输入 下 一 个 图 像 之 前 没有 单 去“ 添加 项 ”按钮 国 ， 则 列表 中 上 次 选 | 


择 的 图 像 将 被 “图 像 源 文件 ”文本 框 中 新 输入 的 图 像 替 换 。 


10.6 安装 第 三 方 行为 


Dreamweaver CS6 很 有 用 的 功能 之 一 束 是 它 的 扩展 性 ， 即 它 提供 了 编写 JavaScript 代 人 码 
的 机 会 ， 这 些 代码 可 以 扩展 Dreamweaver 的 功能 。 然 而 要 创建 行为 ， 用 户 必 须 精 通 HTML 
和 JavaScript 语 言 ， 这 有 很 大 的 难度 。 好 在 网 上 有 许多 可 用 的 第 三 方 行 为 供 下 载 。 
硅 要 从 Exchange 站 点 下 载 科 安装 独行 为 ， 可 以 执行 以 下 操作 : 
(1) 打开 “行为 ”面板 并 单 击 “ 添 加 行为 ”十 按钮， 在 弹出 式 菜 单 中 执行 “获取 更 
多 行为 ”命令 ， 这 时 会 日 动 启动 浏览 融 ， 连 接 到 Dreamweaver 的 官方 站 点 下 载 行 为 。 
(2) 下 载 并 解压 缩 所 需 的 行为 扩展 包 。 
(3) 将 解压 的 文件 存 入 Dreamweaver 安 装 目 录 下 有 的 Configuration/Behaviors/Actions 广 
作 关 日 。 
(4) 重新 局 动 Dreamweaver CS6。 


10.7 实例 制作 之 动态 导航 图 像 


本 贡 将 讲述 使 用 行为 制作 动态 的 导航 图 像 。 初 始 时 ， 叶 航 图 厂 申 的 文学 为 深交 色 或 日 
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半 训 思 导 于 I9AB83MUIP31G 显 0[ 导 


_ Dreomwearer E56 中立 版 入 站 与 提高 实例 如 形 


色 一 将 鼠标 移 到 导航 图 片上 辣 图 片 中 的 文字 显示 为 精 黄 色 ， 且 有 阴影 。 制 作 步 聂 如 下 
01 打开 保存 的 模板 index.dwt。 在 导航 条 中 选中 一 个 导航 项 目 图 片 ， 例 如 “我 的 店 
铺 ”， 在 属性 面板 上 将 其 命名 为 shop。 
02 执行 “窗口 ”/“ 行 为 ”菜单 命令 , 打开 “行为 ”面板 。 单 击 “ 添 加 行为 ”按钮 (+, 
在 弹出 的 行为 下 拉 亲 单 中 选择 “交换 图 像 ” 合 令 , 弹出 图 10- 35 所 不 的 “交换 图 像 ” 对 话 框 。 


设 定 原始 档 当 : 外 .imagesyshop-2. gif 
预先 载 人 图 创 
鼠标 请 开 时 恢复 图 创 


图 10-35 “交换 图 像 ” 对 话 框 


03 在“ 图像” 区 域 选 中 要 江 加 行为 的 图 片 “shop”， 然 后 单 击 “ 设 定 原 始 档 为 ” 
文本 框 右 侧 的 “浏览 ”按钮 ， 在 打开 的 “选择 文件 ”对 话 框 中 选中 需要 的 图 片 文 件 。 

04 9 蛙 击 “确定 ”按钮 关闭 对 话 框 。 此 时 在 “行为 ”和 面板 中 可 以 看 到 ，Dreamweaver 
目 动 为 选 定 的 图 片 洪 加 了 “恢复 交换 图 像 ”行为 ， 并 设置 了 相应 的 行为 。 

05)0 同 理 ， 为 其 他 导航 图 片 添加 “交换 网 像 ” 行 为 ， 然 后 保存 文件 ， 并 按 下 F12 键 在 
浏览 右 中 预 跷 页面。 如 图 10-36 所 未 。 


前 取 风 声 BAAA 4 


mye HW er >S< ES YN 


欢迎 光临 我 的 小 屋 


心 若 没有 楼 总 的 地 方 
到 哪里 都 是 在 流浪 


同一 同 的 茶 的 香气 
哼 一 段 旧时 旋律 
要 是 你 一 定 欢 天 喜 地 


图 10-36 ”页 面 效 果 
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JF), DreamweareriCo6 中 立 豚 入 门 与 接 高 实例 吉 引 


11.1 在 网 页 中 使 用 声音 


对 于 广大 网 页 设计 者 来 说 ， 如 何 能 使 日 己 的 网 站 与 众 不 同 元 满 个 性 ， 一 直 是 不 懈 
努力 的 目标 。 除 了 尽量 提高 页 面 的 视觉 效 来 和 互动 功能 以 外 ， 如 末 能 在 打开 网 页 的 同 
时 ， 听 到 一 曲 优 关 动人 的 音乐 ， 相 信 会 使 网 站 增色 不 少 。 

在 网 页 中 可 以 添加 多 种 类 型 的 声音 文件 格式 ,如 :.midi 或 .mid、.wav、.aif .mp3、.ra、 .ram 
和 :rpm 等 ， 不 同类 型 的 声音 文件 和 格式 有 各 目 不 同 的 特点 。 在 确定 添加 的 声音 文件 的 格式 
之 前 ， 用 户 需 要 考 展 一 些 因 素 ， 例 如 添加 声音 的 目的 、 受 人 砍 、 文 件 大 小 、 声 音 品 质 和 不 同 
的 声音 格式 在 不 同 浏览 器 中 的 差异 。 


11.1.1 网 页 中 音频 文件 的 格式 
下 面 简 要 介绍 几 种 篆 见 的 音频 文件 格式 以 及 每 一 种 格式 在 Web 设计 上 的 一 些 优 缺 


wo 


1. .midi 或 .mid MIDI 是 乐 右 数字 接口 的 简称 ， 顾 名 思 义 是 一 种 主要 用 于 堆 乐 的 音频 
格式 。 很 小 的 MIDI 文 件 也 可 以 提供 较 长 时 间 的 声音 甬 辑 ， 许 多 浏览 器 都 文 持 MIDI 文 件 并 
且 不 要 求 插件 。 尽 管 MIDI 声 音 品 质 非 常 好 ， 但 声卡 不 同 ， 声 音效 末 也 会 有 上 所 不 同 。 此 外 ， 
MIDI 文 件 不 能 被 录制 并 且 必 须 使 用 特殊 的 便 件 和 软件 在 计算 机 上 合成 。 

2. .wav Waveform 格 式 文件 具有 较 好 的 声 首 品 质 ， 许 多 浏览 右 都 文 持 此 闫 格式 文件 
并 且 不 要 求 插件 。 用 户 可 以 从 CD、 厂 珊 、 麦 克 风 等 录制 目 己 的 WAV 文 件 。 但 是 ， 这 种 格 
式 的 文件 较 大 ， 严 格 限 制 了 在 网 员 上 可 以 使 用 的 声 普 坦 辑 的 长 度 。 

3. .aif 它 是 音频 交换 文件 格式 , 即 AIFF, 与 WAV 格 式 类 似 , 也 具有 展 好 的 声音 品质 ， 
大 多 数 浏览 器 都 可 以 不 要 来 搬 件 地 播放 ， 此 外 还 可 以 从 CD、 伺 和 带 、 委 元 风 等 录制 AIFF 文 
件 。AIEFF 格 式 文件 较 大 ， 严 格 限制 了 在 网 员 上 可 以 使 用 的 声音 筋 辑 的 长 度 。 

4. .ra、.ram、.rpm 或 Real Audio ”文件 具有 非常 局 的 压缩 程度 ， 且 文 持 “ 流 式 处 理 ”， 
访问 者 在 文件 宛 全 下 载 完 之 前 即 可 听 到 声音 ， 但 声音 品质 比 MP3 文 件 要 关 ， 而 且 访 问 者 必 
须 下 载 并 安装 RealPlayer 应 用 程序 或 插件 才 可 以 播放 这 些 文件 。 

5. .mp3 ”运动 图 像 专家 组 音频 ， 即 MPEG- 音 频 层 -3， 是 一 种 压缩 格式 ， 可 以 在 明显 
减 小 声音 文件 大 小 的 同时 保持 非常 好 的 声音 品质 。 如 采 正 确 有 录制 和 压缩 MP3 文 件 ， 其 质量 
甚 全 可 以 和 CD 质量 相 媲美 。 这 种 格式 的 文件 大 小 比 Real Audio 格 式 要 大 , 也 文 持 流 式 处 理 ， 
即 边 下 载 按 播放 , 访问 者 不 必 等 竺 整个 文件 下 载 完 成 即 可 收听 该 文件 .大 要 播放 MP3 文 件 ， 
访问 者 必须 下 载 并 安装 辅助 应 用 程序 或 插件 ， 例 如 QuickTime、Windows Media Player 或 
RealPlayer。 


11.1.2 在 网 页 中 添加 声音 


在 网 页 中 添加 音频 有 多 种 方法 。 本 节 介 绍 两 种 常用 的 方法 。 
1. 链接 到 音频 文件 ”链接 到 音频 文件 是 指 将 声音 文件 作为 页 面 上 茶 种 元 素 的 超级 链 
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接 目 标 。 这 种 集成 声音 文件 的 方法 可 以 和合 访问 者 能 够 选择 是 侣 要 收听 该 文件 ， 因 为 只 有 单 
击 了 超级 链接 ， 且 用 户 的 计算 机 上 安装 了 相应 的 播放 器 ,才能 收 昕 首 乐 文件 。 

下 面 汗 示 链接 到 音频 文件 的 基体 操作 。 

0 人 信 新 建 一 个 HTML 文件 ， 输 入 并 格式 化 文学 。 页 面 效 末 如 图 11-1 所 示 。 

02 选中 “1、Careless Whisper”， 在 属性 面板 上 的 “链接 ”区 域 单 击 文件 夹 图 标 找 
到 需要 的 音频 文件 。 

03 同 理 ， 为 其 他 文本 选择 链接 的 首 乐 文 件 。 

04 肯 保存 文件 ， 在 浏览 器 中 预览 页 面 效果。 

单 击 链接 “1、Careless Whisper”， 会 打开 相应 的 媒体 播放 器 播放 指定 的 首 乐 文件 。 
效果 如 图 11-2 所 未 。 


a 
旺 ] 下 各 是 下 用， Mis rst Beeascttnskeer [ee 
站 件 靖 衣 全， 厂 看 fi 中 二 工具 全 En 


莫 玄 弃 昔 
1 Careless Whilsper 


Testodoay conce More 


3» | want it that way 


央 而 | 


图 11-1 页 面 效 末 图 11-2 ”用 WINAMP 播 放 首 乐 


2. 使 用 插件 ”这 种 方法 足 指 将 声 首 播放 占 直 接 插 入 页 耐 中 ， 当 访问 者 计算 机 上 和 安 疙 
有 适当 的 插件 时 ， 声 音 即 可 播放 。 这 种 方法 单 用 于 在 网 页 上 添加 育 景 音乐 。 当 然 ， 这 种 方 
式 也 文 持 用 户 对 声 首播 放 进行 控制 。 
使 用 插件 播放 声音 的 一 般 操 作 步 又 如 下 : 
01 昌 在 “设计 ”视图 中 ， 将 插入 点 放 征 在 要 组 入 插件 的 地 方 。 
02 昌 执行 “插入 ”/“ 媒 体 ”/“ 择 件 ”命令 ， 或 者 单 击 “ 各 用 ”面板 中 的 “媒体 ” 按 
钮 惫 1， 在 弹出 的 下 拉 菜 单 中 单 击 “ 插 件 ”。 
03 旨 在 弹出 的 “选择 文件 ”对 话 框 中 选择 要 播放 的 声音 文件 ， 然 后 单 击 “确定 ” 鬼 


钮 。 


04 用 在 属性 检查 器 中 ， 单 击 套数 .按钮 ， 弹 出 图 11-3 所 示 的 “参数 ”对 话 框 。 


图 11-3 “参数 ”对 话 框 


05 朋 单 击 对 话 框 上 的 击 较 钮 ， 在 “参数 ” 列 中 输入 参数 的 名 称 。 在 “ 值 ” 列 中 输入 
该 参数 的 值 。 输 入 完毕 后 ， 单 击 “确定 ” 鬼 钮 。 
0 扩 执行 “文件 ”/“ 人 保存” 命令 ， 保 存 文 档 。 
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11. 1.3 实例 制作 之 育 票 音乐 


本 节 将 为 “伊人 风尚 ”的 链接 目标 ， 即 photo.html 文 件 添加 背景 音乐 ， 步 骤 如 下 : 

01 打开 已 制作 的 photo.html。 

02 9 在 “设计 ”视图 中 ， 将 插入 点 放置 在 要 骸 入 文件 的 地 方 ， 如 导航 条 图 标的 下 面 。 
执行 “插入”/“ 媒 体 ”/“ 插 件 ” 末 单 命令 ; 或 者 在 “搬入 ”/“ 常 用 ”面板 中 单 击 “媒体 ” 
按钮 甸 " 举人 ， 在 弹出 的 下 拉 菜 单 中 单 击 “插件 ”按钮 品 ， 弹 出 “选择 文件 ”对 话 框 。 

03 选择 需要 的 音乐 文件 follow_your_dream.wma， 单 击 “ 确 定 ” 按 钮 插入 音频 文件 。 

04 几 在 属性 检 碍 部 的 “ 宽 ” 和 “高 ”文本 框 中 设置 插件 的 尺寸 ; 在 “垂直 边 距 ”和 
“水 平 边 距 ” 文 本 框 中 设置 插件 在 页 面 中 的 位 置 ， 在 “对 齐 ” 下 拉 列 表 中 指定 插件 与 页 面 
中 其 他 对 象 的 相对 位 置 ， 在 “边框 ”文本 框 中 指定 揪 件 的 边框 厚度 。 

如 果 将 “ 宽 ” 和 “高 ”的 值 均 设置 为 0， 则 可 隐藏 插件 ， 本 例 分 别 设置 为 200 和 32。 

05 | 单 击 “参数 ”按钮 ， 弹 出 图 11-3 所 示 的 “参数 ”对 话 框 。 在 “参数 ” 列 中 输入 参 
数 的 名 称 “Autostart”。 在 “ 值 ” 列 中 输入 该 参数 的 值 “true” 

06 汪 单 击 对话 框 上 的 二 按 钮 ， 在 “参数 ” 列 中 输入 参数 的 名 称 “Loop”。 在 “ 值 ” 
列 中 输入 该 参数 的 值 “true”。 输 入 完毕 后 ， 单 击 “ 确 定 ” 关 闭 对 话 框 。 

如 果 不 设置 Loop 参 数 ， 或 Loop 参 数 的 值 不 为 true， 则 音乐 播放 一 次 后 目 动 停止 
07 旧 执行 “文件 ”/“ 人 保存” 命令 ， 保 存 文档 。 
08 在 浏览 器 中 预览 页 面 ， 打 开 页 面 时 音乐 会 自动 播放 ， 且 循环 播放 ， 如 图 11-4 所 


最 好 将 声音 文件 添加 到 Flash 影片 ， 然 后 上 诅 入 SWE 文件 以 改善 一 致 性 。 


本 实例 中 ， 背 景 音乐 将 循环 播放 。 浏 览 者 可 以 单 击 播放 器 上 的 控制 按钮 以 控制 背景 首 
乐 的 播放 。 如 宋 不 布 望 播放 需 在 页 面 上 可 见 ， 可 以 执行 以 下 的 步骤 。 

09 旧 选中 页 面 中 的 插件 占 位 符 ， 在 属性 面板 上 将 其 宽 禹 均 设 置 为 0， 或 打开 图 11-3 
所 示 的 “参数 ”对 话 框 ， 单 击 填 按钮， 在 “参数 ” 列 输入 Hidden， 在 “ 值 ” 列 输入 “true”。 
然后 日 击 “ 确 定 ” 欣 钮 关闭 对 话 框 。 

10 旧 保存 文档 。 在 浏览 器 中 预览 页 和 面 效 素 ， 如 图 11-$ 所 示 。 

此 时 ， 浏 览 者 无 法 对 背景 音乐 进行 控制 。 


11.2 插入 Flash 对 象 


Flash 技 术 是 实现 和 传递 基于 矢量 的 图 形 和 动画 的 首选 解决 方案 。Flash 播放 器 在 PC 上 
既 可 作为 Netscape Navigator 上 的 插件 ， 也 可 作为 Microsoft Internet Explorer 上 的 ActiveX 控 
件 , 此 外 它 还 集成 到 了 Netscape Navigator、Microsoft Internet Explorer 和 America Online 的 最 
新 版 本 中 。 
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浏览 器 不 同 ， 处 理 声音 文件 的 方式 也 会 有 很 大 差异 和 不 一 致 的 地 方 。 用 户 


这 迎 光 悦 斐 的 小 层 
点 本 和 


图 11-4 实例 效果 图 11-5 ”隐藏 播放 上 融 效 果 


无 论 是 否 具 有 Flash，Dreamweaver 都 附带 了 可 以 使 用 的 Flash 对 象 ， 使 用 这 些 对 象 可 
以 在 Dreamweaver 文档 中 搬入 Flash 动 男 和 Flash 祝 频 。 


提示: Dreamweaver CS6 已 删除 了 Flash 按钮 、Flash 文本 和 Flash 元 素 。 


11.2. 1 添加 Flash 动 画 


在 Dreamweaver CS6 中 ， 用 户 可 以 很 方便 地 在 页 耐 中 添加 Flash 动 画 。 本 小 节 演 示 在 文 
档 中 插入 Flash 影 片 的 操作 方法 。 

019 新 建 一 个 HTML 文 档 并 保存 。 

02 在 “设计 ”视图 中 ， 将 插入 后 帮 管 在 要 插入 Flash 动 画 的 地 方 ， 单 击 “ 营 用 ” 面 
板 上 的 鱼 :按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 “SWF” 按 钮 重 . 

03 在 弹出 的 “选择 文件 ”对 话 框 中 选择 需要 的 Flash 动 男 文 件 之 后 ， 单 击 “ 确 定 ” 
按钮 插入 Flash 动 田 。 

插入 的 动画 在 页 面 上 显示 为 一 个 Flash 占 位 符 ， 如 图 11-6 所 示 。 

04) 选中 插入 的 影片 占 位 人 符 ， 在 属性 和 面板 上 设置 其 大 小 、 播 放 方 式 、 对 并 方式 和 背 
景 闫 色 。 本 例 将 其 居中 对 章 ， 背 景 闫 色 为 白色 ， 其 他 采用 默认 设置 。 如 果 单 击 闫 色 井 中 的 
加 图标， 则 可 使 Flash 背 景 透 明 。 

05 里 击 属性 面板 上 的 “播放 ”按钮 ， 即 可 预 时 影片 文件 ， 如 图 11-7 所 示 。 


11. 2.2 插入 Flash 视 频 


Dreamweaver CS6 文 持 Flash 视频 , 用 户 只 需要 通过 轻松 点 击 或 编写 侍 合 标 准 的 编码 即 
可 快速 、 便 捷 地 将 Flash 视频 文件 插入 网 页 ， 而 无 需 使 用 Flash 创作 了 工具。 设计 时， 用户 
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还 可 以 在 Dreamweaver CS6 的 实时 视图 中 播放 ELV 影片 。 
击 -: InetpubvwmwxrootvtestAuntitled-3.html (XHTHL) * 


CA swfobject modified. js 


< | | 


< T > 人 £4 
<bodv> [<obiect#FlashID. [RI io v 回国 大 43 .| |<boav>[Kobiect#FlashID) [| 西区 lo vv 回 男 大 43 : 


图 11-6 Flash 动画 的 占 位 符 图 11-7 播放 Flash 动 画 


在 Dreamweaver 页 面 中 搬入 Flash 视频 内 容 之 前 ， 必 须 有 一 个 经 过 编码 的 Flash 视频 
(FLV) 文件 。 
在 Web 页 中 插入 Flash 视频 的 一 般 步 又 如 下 : 
(1) 选择 “插入 ”/“ 媒 体 ”/“FLV” 采 蛙 命 令 ， 弹 出 图 11-8 所 示 的 “插入 FLY” 对 
话 框 。 
(2) 在 “插入 FLV” 对 话 框 中 ， 在 “视频 类 型 ”弹出 式 采 单 中 选择 视频 播放 方式 。 
其 中 ，“ 累 进 式 下 载 视频 ”将 Flash 视频 (FLV) 文件 下 载 到 站 点 访问 者 的 硬盘 上 ， 
然后 播放 。 与 传统 的 “下 载 并 播放 ”视频 传送 方法 不 同 ， 累 进 式 下 载 人 允许 在 下 载 完 成 之 前 
束 开 始 播 放 视 频 文件 。 
“ 流 视频 ”对 Flash 视频 内 容 进行 流 式 处 理 ， 并 在 一 段 很 短 时 间 的 缓冲 (可 确保 流畅 
播放 ) 之 后 在 Web 页 上 播放 该 内 容 。 


I 一 


提 若 要 在 网 页 上 启用 流 视频 ， 必 须 具 有 访问 Adobe Flash Communication 
| 
| 


(3) 在 “URL” 文 本 框 中 键入 Flash 视 频 的 相对 路 径 或 绝对 路 径 。 

(4) 在 “外 观 ” 下 拉 荣 单 中 指定 Flash 视频 组 件 的 外 观 。 所 选 外 观 的 预览 会 出 现在 
“外 观 ” 弹 出 菜单 下 方 。 

(5) 在 “宽度 ”和 “高 度 ” 文 本 框 中 以 像素 为 单位 指定 FLV 文件 的 宽度 和 高 度 。 

(6) 单 击 “检测 大 小 ”按钮 ，Dreamweaver 可 以 帮助 用 户 确定 FLV 文件 的 准确 宽度 
或 高 度 。 如 果 Dreamweaver 无 法 确定 宽度 或 局 度 ， 则 必须 键入 宽度 或 高 度 值 。 

(7) 选中 “限制 高 宽 比 ” 复 选 枉 ， 则 保持 Flash 视频 组 件 的 宽度 和 高 度 之 间 的 比例 
不 变 。 默 认 情 况 下 选择 此 选项 。 
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视频 类 型 :| 累进 式 下 载 视频 


URL: 
( 输入 FLY 文件 的 相对 或 匈 对 路 径 ) 


外 观 : |clear Skin 1 (最 小 宽度 : 140) 


p ) 


宽度 : | | 回 限制 高 宽 比 
高 度 : | 。 ”| 包括 外 观 : 

口 自动 播放 

口 自动 重新 播放 


CD 要 观看 视频 ,请 在 浏览 器 中 预览 页 面 。 


图 11-8 “插入 FLV” 对 话 框 


设置 宽度 、 高 度 和 外 观 后 ，“ 包 括 外 观 ” 后 将 自动 显示 FLV 文件 的 宽度 和 高 度 与 所 
选 外 观 的 宽度 和 高 度 相 加 得 出 的 和 。 

(8) 选中 “自动 播放 ” 复 选 框 ， 则 Web 页 面 打 开 时 自动 播放 视频 。 

(9) 选中 “上 自动 重新 播放 ” 复 选 枉 ， 则 播放 控件 在 视频 播放 完 之 后 返回 到 起 始 位 置 。 

(10) 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 并 将 Flash 视频 内 容 添加 到 Web 页 面 。 

在 Dreamweaver 中 ， 将 Flash 视频 文件 插入 页 面 之 后 ， 可 以 在 页 面 中 插入 有 关 代 人 码 ， 
以 检测 用 户 是 否 拥 有 查看 Flash 视频 所 需 的 正确 的 Flash Player 版 本 。 如 果 用 户 没 有 正确 
的 版 本 ， 则 会 提示 用 户 下 载 Flash Player 的 最 新 版 本 。 

“插入 FLV ”命令 将 生成 一 个 视频 播放 器 SWF 文件 和 一 个 外 观 SWF 文件 ， 它 们 
共同 用 于 在 Web 页 面 上 显示 Flash 视频 内 容 。 这 些 文件 与 Flash 视频 内 容 所 添加 到 的 
HTML 文件 存储 在 同一 目录 中 。 当 上 传 包含 Flash 视频 内 容 的 HTML 页 面 时 ， 
Dreamweaver 将 以 相关 文件 的 形式 上 传 这 些 文 件 。 

插入 Flash 视 频 之 后 ， 在 “文档 ”窗口 中 单 击 Flash 视频 组 件 占 位 符 ， 可 以 打开 图 11-9 
所 示 的 属性 检查 器 更 改 Flash 视 频 的 一 些 属性 。 


:下属 性 E 
] pe 视频 | 宽 300 Y 限制 高 宽 比 | 重 是 | 文件 这 才 叫 唱歌 . 日 v 已 类 (C) | 无 | 


FIVPlaver || 高 400 包括 外 观 : 300x400 外 观 |Clear Skin 1 (最 小 宽度 : 140) 后 
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” 自动 播放 
自动 重新 播放 


图 11-9 ”Flash 视 频 的 属性 面板 


“9 使 用 属性 检查 器 不 能 更 改 视 频 的 类 型 (例如, 从 “累进 式 下载 ” 更 改 为 “ 流 


式 ” ) 。 若 要 更 改 视频 类 型 ， 必 须 删 除 Flash 视频 组 件 ， 然 后 通过 选择 “插入 ”/“ 煤 
体 ”/“FLV” 命令 重新 插入 Flash 视频 。 


| 


好 TT 潍 


司 避 和 低 狂 殿 僚 悍 
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该 属性 检查 器 中 的 选项 与 “插入 FLV” 对 话 框 申 的 选项 类 似 ， 在 此 不 再 袭 述 。 
如 果 要 从 页 面 中 删除 Flash 视频 ， 则 不 再 需要 检测 代码 ， 可 以 使 用 “命令 ”/“ 删 除 
FLV 检 测 ” 沫 单 命令 删除 检测 代码 ， 然 后 选中 Flash 视 频 占 位 符 ， 按 Delete 键 将 其 删除 。 


11.3 插入 其 他 多 媒体 对 象 


在 Dreamweaver CS6 中 ， 除 了 能 在 网 页 中 插入 声音 、Flash 动 画 和 Flash 视 频 等 多 媒体 元 
素 之 外 ， 还 可 以 插入 APPLET、ActiveX 探 件 、Shockwave 电 影 等 多 媒体 对 象 。 此 外 ， 用 户 
还 可 以 在 Adobe 的 插件 下 载 中 心 下 载 插 件 ， 从 而 以 可 视 化 方式 轻松 地 插入 其 他 类 型 的 视频 
或 多 媒体 元 素 ， 如 RealMedia、Windows Media、QuickTime 等 。 


11. 3.1 插入 APPLET 


Applets 是 通过 编程 语言 Java 开 发 的 可 移入 网 页 中 的 小 型 应 用 程序 。 在 创建 了 Java 
applets 之 后 , 可 以 使 用 Dreamweaver 将 其 插入 HTML 文 档 中 。Dreamweaver 使 用 applet 标 记 来 
标记 对 此 applets 文 件 的 引用 。 

下 面 演示 在 文档 中 插入 Java applets 的 一 般 操 作 步 又。 

01 9 新 建 一 个 HIML 文档 。 在 “设计 ”视图 中 ， 将 插入 点 放置 在 要 插入 applets 探 件 的 
位 置 。 

02 执行 “插入 ”/“ 媒 体 ”/“Applet” 沫 单 命 令 ， 或 者 在 “插入 ” 栏 中 ， 激 活 “ 第 
用 ”面板 ， 然 后 单 击 “ 媒 体 ” 按 钮 弹出 下 拉 菜 单 ， 在 下 拉 菜 单 中 单 击 总 am" ， 打 开 “ 选 
择 文件 ”对 话 框 。 

03 在 弹出 的 对 话 框 中 ， 选 择 包含 Java applets 的 文件 Clock2.class。 单 击 “ 确 定 ” 按 
钮 关闭 对 话 框 。 

04 有 在 “设计 ”视图 中 ， 选 中 插入 的 applet 占 位 符 . 基 ， 打 开 图 11-10 所 示 的 属性 面板 。 
在 “ 宽 ” 和 “局 ”中 分 别 输入 180 和 32。 


尾 性 三 


a Applet 名 称 ， 宽 吕 32 | 慌 码 (C) Clock2. class 世 对 齐名 ) | 默认 值 v| 类 @) > 
] 一 高 如 32 ”| 基 址 外 ) 蔡 换 CI) 加 
垂直 过 距 0 
水 平 边 距 @) a 


图 11-10 Java applets 控件 的 属性 


05 在 “Applet 名 称 ” 文 本 框 中 输入 用 于 标识 applets 以 进行 脚本 搂 写 的 名 称 。 

06 “代码 ”文本 框 中 目 动 填充 已 插入 的 含有 Java applets 的 文件 名 称 Clock2.class。 
早 击 文件 夹 图 标 可 以 浏览 到 某 一 文件 ， 或 者 直接 输入 文件 名 。 

07 在 “ 基 址 ”文本 框 中 指定 包含 选 定 applets 的 文件 夹 。 在 选择 了 一 个 applets 后 ， 此 
域 被 目 动 填充 。 

08 蛙 击 “参数 ”按钮 ， 可 以 打开 图 11-3 所 示 的 “参数 ”对 话 框 ， 用 于 为 applet 设 置 
控制 参数 。 本 例 不 作 设 置 。 

09 在 “ 王 表 边 距 ” 和 “水 平 边 距 ”文本 框 中 设置 applet 在 页 面 中 的 位 置 。 
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10 在 “对 齐 ” 下 拉 列 表 中 指定 applet 与 页 面 申 其 他 元 素 的 相对 位 置 。 
11 在 “ 蔡 换 ”文本 框 中 指定 在 用 户 的 浏览 右 不 文 持 Java applet 或 者 已 禁用 Java 时 
要 显示 的 替代 内 容 。 本 例 保 留 默 认 设置 。 
该 项 通常 为 一 个 图 像 。 如 果 输 入 文本 ，Dreamweaver 会 插入 这 些 文本 ， 并 将 它们 作为 
applet 的 alt 属性 的 值 。 
人 至此， 文档 创建 完毕 。 
12 上 保存 文档， 在 浏览 器 中 预览 整个 页 面 。 效 素 如 图 11-11 上 所 示 。 
@ 无 标题 文档 - 做 游 [Maxthon] OA 
文件 !E) ”编辑 EE) ”查看 ( 罗 收藏 (和 ”快捷 组 (@) 选 I 郊 
bye, p 让 |-| 鸭 |-| 国 | 


地 址 六] http:jilocalhostjApplets.html 呵 EE 


Thu, December 27 11:13:45 


Q|342 x 201 癌 0 名 


图 11-11 实例 效 末 


11.3.2 添加 ActiveX 控 件 


目 从 Microsoft 公 司 于 1996 年 推出 ActiveX 技 术 以 来 ，ActiveX 技 术 已 得 到 了 许多 软件 公 
司 的 文 持 和 啊 应 ， 并 纷纷 在 其 产品 中 融入 ActiveX 技 术 ， 而 作为 ActiveX 技 术 之 一 的 ActiveX 
控件 也 得 到 了 迅猛 的 发 展 。 
什么 是 ActiveX 探 件 呢 ?ActiveX 控 件 的 前 映 束 是 OLE 控 件 ， 是 可 以 充当 浏览 絮 插 件 的 
可 重复 使 用 的 组 件 ， 类 似 微型 的 应 用 程序 。 由 于 ActiveX 探 件 与 开发 平台 无 关 ， 因 此 通过 
使 用 ActiveX 探 件 即 可 快速 实现 组 件 重用 ， 实 现代 码 共 享 ， 从 而 提高 编程 效率 。 
下 面 演示 在 文档 中 插入 ActiveX 探 件 的 具体 操作 步骤 。 
01 在 “设计 ”视图 中 ， 将 插入 点 放置 在 要 插入 ActiveX 控 件 的 位 置 。 
02 执行 “插入 ”/“ 媒 体 ”/“ActiveX” 末 蛙 命 令 ; 或 者 在 “常用 ”面板 中 单 击 “ 媒 
体 ” 按 钮 奋 " 弹 出 下 拉 菜 单 ， 在 下 拉 菜 单 中 单 击 蕊 iv ， 插 入 ActiveX 控 件 。 
与 插入 其 他 对 象 不 同 ， 插 入 ActiveX 探 件 时 不 会 出 现 对 话 框 ， 而 是 直接 在 文档 窗口 中 
添加 一 个 ActiveX 控 件 占 位 符 到 。 
03 朋 选中 ActiveX 探 件 属性 面板 上 的 “和 藤 入 ” 复 选 枉 ， 如 图 11-12 所 示 。 单 击 “ 源 文件 ” 
石 边 文件 夹 图 标 ， 弹 出 “选择 NetScape 插 件 文件 ”对 话 框 。 
选中 “ 舱 入 ” 复 选 框 可 以 为 该 ActiveX 控件 在 object 标记 内 添加 embed 标记 。 如 末 
ActiveX 控件 具有 等 效 的 Netscape Navigator 插件 , 则 embed 标记 激活 该 插件 .Dreamweaver 
将 ActiveX 属性 的 值 指派 给 等 效 的 Netscape Navigator 插件 。 


尾 性 


LT Activex 寅 (|32 | ClassIn (C)| v|- 对 齐 多 默认 值 Y| 类 CC) [无 
个 | 高 B22 ] |[ 嵌 入) 四 交 件 6)| | 已 

垂直 过 距 0)| | 基 址 (@)| | 

水 平 边 距 P) | Ia | 数据 0)| | 苦 换 图 像 r | 


图 11-12 选中 属性 面板 上 的 “ 藤 入 ” 复 选 杠 
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启用 了 “岁入 ”选项 之 后 ，“ 源 文件 ”区 域 变 为 可 用 ， 用 户 在 这 里 可 以 指定 将 要 用 于 
Netscape Navigator 插件 的 数据 文件 。 如 来 没有 输入 值 ， 则 Dreamweaver 将 笠 试 根据 已 输入 
的 ActiveX 属性 确定 该 值 。 

04 朋 在 对 话 框 中 选择 一 个 插件 文件 。 单 击 “ 确 定 ” 按 钮 插入 文件 。 

05 在 “ActiveX” 文 本 框 中 输入 名 称 。 访 名称 在 进行 脚本 撰写 时 ， 用 于 标识 ActiveX 
控件 。 

06 在 “Class ID” 文 本 框 中 输入 一 个 值 ， 或 从 弹出 式 菜 单 中 选择 一 个 值 ， 用 于 为 浏 
览 需 标识 ActiveX 探 件 的 位 置 。 

在 加 载 页 面 时 ， 浏 览 器 使 用 该 类 ID 来 确定 与 该 页 面 基 联 的 ActiveX 探 件 的 位 置 。 如 果 
浏 虎 右 未 找到 指定 的 ActiveX 控 件 ， 则 它 将 答 试 从 “ 基 址 ”指定 的 位 置 中 下 载 它 。 

079 “ 基 址 ”文本 框 用 于 指定 包含 该 ActiveX 控 件 的 URL。 

如 果 在 访问 者 的 系统 中 尚未 安装 ActiveX 控 件 ， 则 Internet Explorer 从 该 位 置 下 载 它 。 如 
汞 没有 指定 “ 基 址 ”参数 ， 并 且 访 问 者 尚未 安 朔 相应 的 ActiveX 控 件 ， 则 浏览 右 不 能 显示 
ActiveX 对 象 。 

08 在 “ 符 换 网 像 ” 文 本 框 中 指定 当 浏 览 吉 不 文 持 object 标 记 时 显示 的 图 像 。 只 有 在 
没有 选中 “ 髓 入 ” 复 选 框 的 情况 下 ， 此 选项 才 可 用 。 

09 在 “数据 ”文本 框 中 为 要 加 载 的 ActiveXx 探 件 指定 数据 文件 ,许多 ActiveX 控 件 ( 例 
如 Shockwave 和 RealPlayer) 不 使 用 此 参数 。 

10 贞 单 击 攻 二 播放 -| 按钮 ， 可 以 在 文档 窗口 中 预览 ActiveX 控 件 ， 此 时 按钮 变 为 
四 售 止 |。 单 击 “ 停 止 ” 按 钮 可 以 结束 影片 播放 。 

119 单 击 “参数 ”按钮 ， 可 以 打开 “参数 ”对 话 框 ， 在 其 中 输入 附加 参数 。 

12 自 保存 文档 。 在 浏览 器 中 预 筑 整个 页 面 。 


11. 3. 3 添加 shockwave 电 影 


Shockwave 是 一 种 插件 ， 使 得 在 Adobe Director 中 创建 的 多 媒体 文件 能 够 被 快速 下 载 ， 
而 且 可 以 在 大 多 数 第 用 浏览 右 中 进行 播放 。 播 放 Shockwave 影 片 的 软件 既 可 作为 Netscape 
Navigator 插 件 提 供 ， 也 可 作为 ActiveX 探 件 提 供 。 当 插入 Shockwave 影 万 时 ，Dreamweaver 
同时 使 用 object 标 记 ( 用 于 ActiveX 探 件 ) 和 embed 标 记 〈 用 于 插件 ) 以 在 所 有 浏览 器 中 都 
获得 最 佳 效 末 。 
Shockwave 文 件 在 网 页 中 的 舱 入 方法 与 Flash 动 画 基本 一 样 ， 仅 仅 是 文件 格式 不 同 。 下 
面 演示 在 文档 中 插入 Shockwave 电 影 的 具体 操作 。 
01 在 “设计 ”视图 中 ， 将 搬入 点 放置 在 要 插入 Shockwave 影 片 的 位 置 。 
02 执行 “插入 ”/“ 媒 体 ”/“Shockwave” 有 表 早 命令 ,或 者 在 “名 用 ”面板 中 单 击 
“媒体 ”图 标 ， 然 后 在 下 拉 荣 单 中 单 击 和 网 shewsr。 。 
03 在 弹出 的 “选择 文件 ”对 话 杠 中， 选择 一 个 Shockwave 影 上 请 文件 。 然 后 单 击 “ 确 
定 ” 按 钮 关闭 对 话 框 。 
04 选中 搬入 的 Shokwave 影 片 占 位 符 ， 在 图 11-13 所 示 的 属性 和 面板 的 “ 冤 ” 和 “ 禹 ” 
文本 框 中 分 别 输入 影 睛 的 宽度 400 和 高 度 300。 
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图 11-13 Shockwave 属性 面板 


和 “Sound” . ee 
06 和 保存 文档 。 在 浏览 器 中 预览 页 面 效果 。 
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12.1 模板 和 库 的 功能 


在 Dreamweaver 中 , 模板 是 一 种 以 .dwt 为 扩展 名 的 特殊 文档 ,用 于 设计 固定 的 页 面 布局 。 
模板 由 两 种 区 域 组 成 : 锁定 区 和 可 编辑 区 。 锁 定 区 域 包 售 了 在 所 有 页 面 中 共有 的 元 素 ， 即 
构成 页 面 的 基本 框架 ， 比 如 导航 条 、 标 题 等 。 第 一 次 创建 模板 时 ， 所 有 的 区 域 都 是 锁定 的 。 
而 可 编辑 区 域 是 根据 用 户 需 要 而 指定 的 用 于 设置 负面 不 同 内 容 的 区 域 ， 通过 编辑 可 编辑 区 
的 内 容 ， 可 以 得 到 与 模板 风格 一 致 ， 但 又 有 所 不 同 的 新 的 网 页 。 

模板 还 有 一 种 特殊 形式 ， 即 散人 套 模 板 。 髓 套 模板 是 指 其 设计 和 可 编辑 区 域 都 基于 为 一 
个 檬 板 的 模板 。 生 成 租 套 模板 所 基于 的 模板 称 为 基 模 板 ， 相 对 于 髓 套 模 板 而 言 ， 其 模板 中 
包含 更 宽广 的 设计 区 域 , 并 且 可 以 由 站 点 的 多 个 内 容 提 供 者 使 用 ， 而 级 套 模 板 可 以 进一步 
定义 站 点 内 特定 部 分 页 面 中 的 可 编辑 区 域 。 

模板 被 创建 之 后 ， 还 可 以 进行 修改 ， 例 如 添加 新 的 可 编辑 区 域 ， 或 锁定 可 编辑 区 域 。 
而 且 用 户 还 可 以 随时 将 基于 模板 创建 的 文档 与 模板 分 离 ， 编 辑 完 文 档 之 后 ， 还 可 以 将 该 文 
档 与 相应 的 模板 重新 建 并 联系 。 

在 同一 个 站 点 中 ， 网 页 文件 中 除了 相同 的 外 观 之 外 ， 还 有 一 些 需 要 经 常 更 狐 的 页 面 元 
系 ， 例 如 版 权 声 明 、 实 时 消息 、 公 告 内 容 ， 也 是 相同 的 。 这 些 内 容 与 模板 不 同 ， 它 们 只 是 
页 面 中 的 一 小 部 分 ， 在 各 个 页 面 中 的 摆 放 位 置 可 能 不 同 ， 但 内 容 却 是 一 致 的 。 在 
Dreamweaver 中 ， 可 以 将 这 种 内 容 保存 为 一 个 库 文 件 ， 在 需要 的 地 方 插 入 ， 以 便于 在 需要 
的 时 候 能 够 快速 更 新 。 

库 用 于 存放 这 些 广泛 地 用 在 整个 站 点 中 ， 并 能 够 重复 地 被 使 用 或 需要 经 冲 更 新 的 元 
系 ， 它 们 被 称 为 库 项 目 。 与 模板 相似 ， 库 也 是 Dreamweaver 中 处 理 重 复元 素 的 有 力 工 具 之 
一 。 库 可 以 使 重复 性 的 更 新 工作 更 快 、 更 容易 ， 并 且 无 甜 销 。 例 如 每 个 页 面 上 都 有 一 个 版 
权 声 明 ， 在 网 站 的 建设 过 程 中 ， 设 计 者 可 能 需要 经 第 改变 该 声明 。 如 果 一 个 一 个 页 面 地 修 
改 ， 不 仪 要 花费 很 多 的 精力 和 时 间 ， 而 且 很 可 能 出 错 或 遗 涯 。 如 果 使 用 库 ， 只 要 修改 库 中 
的 项 目 ， 就 可 以 保证 站 点 中 使 用 该 库 项 目的 页 和 面 全 部 自动 更 狐 。 

傈 而 言 之 ， 模 板 是 一 种 页 面 布局 ， 草 复 使 用 的 是 网 页 的 一 部 分 结构 ; 而 库 是 一 种 用 于 
放置 在 网 页 上 的 资源 ， 香 复 使 用 的 是 网 页 对 和 象 。 但 它们 两 者 有 一 个 相同 的 特性 ， 束 是 库 项 
目 和 模板 与 应 用 它们 的 文档 都 保持 关联 ， 在 更 改 库 项 目 或 模板 的 内 容 时 ， 可 以 同时 更 狐 所 
有 与 之 关 的 页 面 。 因 此 使 用 库 与 模板 可 以 更 方便 地 维护 网 站 ,合理 地 利用 模板 和 库 的 功能 
可 以 极 大 地 提高 工作 效率 。 

执行 “窗口 ”/“ 资 源 ” 腔 单 俞 令 ， 或 按 F8 快 捷 键 ， 打 开 图 12-1 所 示 的 “资源 ”面板 。 
单 击 “ 资 源 ” 面 板 左 侧 的 “模板 ”按钮 图 ， 即 可 切换 到 “模板 ”面板 ， 如 图 12-2 所 示 。 面 
板 上 半 部 分 显示 当前 选择 模板 的 缩 略图 ， 下 半 部 分 则 是 当前 站 点 中 所 有 模板 的 列表 。 

“模板 ”面板 抵 部 的 按钮 是 模板 操作 的 快捷 表单 。 各 个 按钮 的 作用 如 下 : 
名 :刷新 站 点 列表 ， 更 新 模板 。 

蔬 ， 在 模板 列表 中 新 建 一 个 未 命名 的 模板 。 

学 : 编辑 当前 在 模板 列表 中 选择 的 模板 。 

西 : 删除 当前 在 模板 列表 中 选择 的 模板 。 
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应 用 _|: 将 选择 的 模板 应 用 到 当前 文档 中 。 


图 像 : @) 站 点 〇 收藏 目 
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图 12-1 “资源 ”面板 图 12-2 “模板 ”面板 


12.2 创建 模板 和 骨 套 模板 


用 户 可 以 从 无 到 有 创建 空白 的 模板 ， 然 后 在 其 中 输入 需要 的 内 容 : 也 可 以 将 现 有 的 文 
档 存 储 为 模板 。 创 建 模板 之 后 ，Dreamweaver 会 自动 在 用 户 的 本 地 站 点 目录 中 添加 一 个 名 
为 Templates 的 目录 ， 然 后 将 模板 文件 存储 到 该 目录 中 。 


| 注意 : 
a 不 要 将 模板 移动 到 Templates 文件 夹 之 外 或 者 将 任何 非 模 板 文件 放 在 


Templates 文件 夹 中 。 也 不 要 将 Templates 文件 夹 移动 到 本 地 根 文件 夹 之 外 。 否 则 ， 
将 在 模板 的 路 径 中 引起 错误 . 


12. 2.1 创建 空 模板 


在 Dreamweaver CS6 中 创建 空 模 板 有 两 种 方式 ， 一 种 是 在 “ 狐 建 文档 ”对 话 框 中 创建 ， 
其 步 又 如 下 : 
(1) 执行 “文件 ”/“ 狐 建 ” 采 蛙 命 令 ， 打 开 “ 狐 建文 档 ”对话 框 。 
(2) 在 对 话 框 左 侧 的 “类 列 ” 栏 选中 “至 模 板 ”， 在 “模板 类 型 ”列表 中 选择 需要 
的 模板 类 型 ， 在 “布局 ”列表 中 选择 模板 的 页 面 布 局 ， 然 后 单 击 “创建 ”按钮 。 
(3) 执行 “文件 ”/ “保存 ”命令 保存 空 模板 文件 ， 此 时 会 弹出 一 个 对 话 框 ， 提 醒 用 
户 本 模板 没有 可 编辑 区 域 。 
若 选 中 “不 再 警告 我 ” 复 选 杠 ， 那 么 下 次 保存 没有 可 编辑 区 域 的 模板 文件 时 将 不 再 弹 
出 此 对 话 框 。 
(4) 单 击 “ 人 确定” 按钮 完成 存档 。 
另 一 种 是 在 “模板 ”面板 中 创建 至 模板 ， 其 步骤 如 下 : 
(1) 在 Dreamweaver CS6 界 和 面 中 选择 “窗口 ”/“ 资 源 ” 有 末 单 命令 ， 调 出 “资源 ”面板 ， 
单 击 模板 图 标 按钮 加 ;切换 到 “模板 ”面板 。 
(2) 单 击 “ 模 板 ” 面 板 底 端的 “新 建 模板 ”图 标 昌 ,模板 列表 中 会 出 现 一 个 新 模板 ， 


228 


日 名 称 为 可 编辑 状态 。 

(3) 输入 模 极 名 称 之 后 按 Enter 键 ,或 里 击 和 面板 其 他 空 日 区 域 。 人 至 此 ， 一 个 空 模板 就 
制作 完成 了 。 

模板 的 制作 方法 与 普通 网 页 类 似 ， 不同 之 处 在 于 模板 制作 完成 后 ， 还 应 定义 可 编辑 区 
域 、 重 复 区 域 等 模板 对 象 ， 有 关 介 绍 将 在 后 面 章节 中 进行 介绍 。 


12.2.2 将 网 页 保存 为 模板 


用 户 也 可 以 将 已 编辑 好 的 文档 存储 为 模板 ， 这 样 生 成 的 模板 中 会 带 有 现在 文件 中 已 编 
辑 好 的 内 容 ， 而 且 可 以 在 该 基础 上 对 模板 进行 修改 ， 使 之 满足 设计 需要 。 下 面 演示 将 现 有 
网 页 保存 为 模板 的 操作 步骤 。 

0 久 执行 “文件 ”/“ 打 开 ” 命 令 ， 在 “选择 文件 ”对 话 框 中 选择 一 个 将 作为 模板 的 
普通 文件 ， 如 图 12-3 所 示 。 

02 执行 “文件 ”/“ 另 存 为 模板 ” 沫 单 命 令 ， 弹 出 “另存 模板 ”对 话 框 。 

03 9 在“ 站点” 下拉 采 单 中 选择 将 保存 该 模板 的 站 点 名 称 。 本 例 选择 test。 

“现存 的 模板 ”列表 框 中 列 出 了 当前 选择 的 站 点 中 所 有 的 模板 文件 。 

04 在 “描述 ”文本 框 中 输入 该 模板 文件 的 说 明 信 息 。 本 例 你 留 默 认 设 置 。 

05 在 “另存 为 ”文本 框 中 输入 模板 名 称 。 本 例 输入 nav。 

如 末 要 敌 兰 现 有 的 模板 ， 可 以 从 “现存 的 模板 ”列表 中 选择 需要 上 履 闸 的 模板 名 称 。 

06) 单 击 “ 保 存 ” 按 钮 ， 即 可 关闭 对 话 框 。 

此 时 会 弹出 一 个 对 话 框 ， 询 问 用 户 是 否 要 更 新 链接 。 

07 单 击 “是 ”更 新 模板 中 的 链接 ， 并 将 该 模板 保存 在 本 地 站 点 根 目录 下 的 Template 
Be 

此 时 ,文档 的 标题 栏 显 示 为 << 模 板 >>nav.dwt， 如 图 12-4 所 示 。 表 明 该 文档 已 不 是 普通 
文档， 而 是 一 个 模板 文件 。 


< 
i ES [Rj io vv 上 可 男 [ 因 | 


图 12-3 ”打开 的 普通 文件 图 12-4 ”转换 为 模板 的 文档 
将 该 文件 在 浏览 器 中 预 入 ,会 发 现 该 文档 中 无 法 键入 文本 或 插入 图 像 。 这 是 因为 还 没 
有 为 模板 定义 可 编辑 区 域 ， 所 有 的 区 域 都 是 锁定 的 。 有 关 定 义 可 编辑 区 域 的 操作 方法 ， 将 
在 下 一 节 中 介绍 。 
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12. 2.3 ”定义 可 编辑 区 域 


可 编辑 区 域 用 于 在 基于 模板 创建 的 HTML 网 页 中 改变 页 面 内 容 ， 它 们 可 以 是 文本 、 图 
像 或 其 他 的 媒体 ， 如 Flash 动画 或 Java 小 程序 。 编 辑 完成 之 后 ， 可 以 将 该 文档 保存 为 独立 的 
HTMEL 文件 。 

下 面 演示 在 模板 中 定义 一 个 可 编辑 区 域 的 具体 操作 步骤 。 

019 依照 本 书 第 12.2.1 贡 介绍 的 方式 新 建 一 个 空 模板 文件 。 然 后 在 文档 窗口 的 “设计 ?” 
视图 中 插入 一 个 三 行 三 列 的 表格 ， 合 并 第 一 列 单元 格 之 后 插入 图 像 ， 并 在 其 他 单元 格 中 输 
入 文字 。 此 时 的 页 面 效 果 如 图 12-5 所 示 。 

029 选中 表格 的 第 二 行 二 列 到 第 三 行 三 列 ， 单 击 “ 常 用 ”面板 上 目 "图 标 中 的 下 拉 第 
头 ， 在 弹出 菜单 中 单 击 回 攻 wa 吕 菜单 项 ， 弹 出 “新 建 可 编辑 区 域 ”对 话 框 。 

03 肯 在 “名 称 ” 文 本 框 输入 可 编辑 区 域 的 名 字 。 本 例 输 入 “景点 名 称 ”， 然 后 单 击 
“确定 ”按钮 关闭 对 话 框 。 

插入 的 可 编辑 区 在 模板 文件 中 默认 用 赣 绿 色 高 亮 显示 ， 并 在 顶端 显示 指定 的 名 称 ， 如 
图 12-6 所 示 。 


图 12-5 页 面 效 果 图 12-6 插入 的 可 编辑 区 域 


04 保存 文件 。 一 个 简单 的 模板 文件 束 制 作 完 成 了 。 

05 打开 “模板 ”面板 ， 在 刚 保 存 的 模板 文件 上 单 击 女 标 右键 然后 在 弹出 的 采 单 中 
选择 “从 模板 狐 建 ”命令 ， 狐 建 一 个 HTML 文 档 。 

06 用户 可 以 看 到 新 建 的 文档 内 容 与 保存 的 模板 一 样 ， 但 只 有 已 定义 的 可 编辑 区 域 
可 以 修改 ， 其 他 区 域 则 处 于 锁定 状态 ， 如 图 12-7 所 示 。 


图 12-7 只 有 可 编辑 区 域 可 以 修改 
选中 模板 文件 中 的 可 编辑 区 域 , 切换 到 文档 窗口 的 “代码 ”视图 ， 可 以 看 到 以 下 代码 : 


<!-- TemplateBesmEditable name="content" --> 
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<tr> 
<td height="82" align="center" valign="middle" class='"fsl"> 三 天 风景 区 </td> 
<td align="center" valign="middle" class="fs1">120 元 </td> 
</tr> 
<tr class="fs1"> 
<td align="center" valign='"middle"> 香 溪 源 </td> 
<td align="center" valign="middle">15 元 </td> 
</tr> 
<!-- TemplateEndEditable --> 
TemplateBeginEditable 和 TemplateEndEditable 束 是 可 编辑 区 域 的 开始 与 结束 标志 和 侍 。 
如 采 和 硕 望 将 模板 中 的 菏 个 可 编辑 区 式 变 为 锁定 区 域 ， 可 以 在 “设计 ”视图 中 选中 要 删 
除 的 可 纲 辑 区 域 ， 然 后 执行 “修改 ”/“ 模 板 ”/“ 删 除 模 板 标 记 ” 菜 单 命令 ， 即 可 将 可 编 
辑 区 域 变 为 不 可 编辑 区 域 。 


12. 2.4 定义 可 选区 域 


“可 选区 域 ” 是 在 模板 中 指定 为 可 选 的 部 分 ， 用 于 保存 有 可 能 在 基于 模板 的 文档 中 出 
现 的 内 容 ( 如 可 选 文本 或 图 像 )。 例 如 ， 如 果 可 选区 域 中 包括 图 像 或 文本 ， 用 户 可 设置 该 
内 容 在 基于 模板 的 狐 文 档 中 是 否 显 示 。 

下 面 泗 示 在 模板 文档 中 插入 可 选区 域 的 具体 步骤 。 

010 新 建 一 个 HTML 模板 文件 ， 在 “设计 ”视图 中 ， 插 入 一 张 图 像 ， 此 时 的 页 面 效 
果 如 图 12-8 所 示 。 


于 
二 wntitlea-5 GET)* ue 


图 12-8 插入 图 像 
02 选中 图 像 ， 执 行 “ 插 入 ”/“ 模 板 对 象 ”/ “可 选区 域 ” 深 单 命 令 ， 或 单 击 “名 用 ?” 


面板 上 回 " 图 标 中 的 下 拉 箭 头 ， 在 弹出 菜单 中 单 击 回 证 SB 
可 选区 域 ” 对 话 框 。 

03 在 “名 称 ” 文 本 框 中 输入 可 选区 域 模板 参数 的 名 称 。 本 例 使 用 默认 设置 。 

04 选中 “默认 显示 ” 复 选 杠 ， 即 可 选区 域 默 认 状 态 下 可 见 ， 本 例 选 中 此 项 。 

05 蛙 击 “局 级 ”标签 ， 选择 控制 可 选区 域 可 见 性 的 方式 。 本 例 选 择 “ 输 入 表达 式 ”， 
并 指定 表达 式 为 Laneuage=='English'。 


， 弹 出 图 12-9 所 示 的 “新 建 
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图 12-9 “新 建 可 选区 域 ” 对 话 框 


可 选区 域 是 由 条 件 语 句 控 制 的 。 用 户 可 以 在 “新 建 可 选区 域 ” 对 话 框 中 创建 模板 参数 
和 表达 式 ， 或 通过 在 “代码 ” 视 网 中 键入 参数 和 条 件 语句 来 控制 可 选区 域 。 

如 琳 选 择 “ 使 用 参数 ”， 则 使 用 指定 的 参数 控制 可 选区 域 。 

如 采 选 择 “ 和 输入 表达 式 ”， 则 根据 指定 的 表达 式 的 值 确定 是 售 显 示 可 选区 域 。 表 达 式 
值 为 真 ， 显 示 可 选区 ; 表达 式 值 为 假 ， 则 隐藏 可 选区 。Dreamweaver 目 动 在 输入 的 文本 两 
侧 插 入 双 3 引 | 号。 

06 单 击 “ 确 定 ” 按 钮 ， 择 入 可 选区 域 。 最 终 制 作 结果 ， 如 图 12-10 所 示 。 


图 12-10 插入 的 可 选区 域 
如 果 要 编辑 参数 或 表达 式 ， 单 击 可 选区 域 左 上 角 的 标签 选中 该 可 选区 域 ,， 然后 在 属性 


面板 上 单 击 “ 编 辑 ” 按 钮 ， 即 可 打开 “新 建 可 选区 域 ” 对 话 框 ， 进 行 重 新 设置 。 

选中 可 选区 域 之 后 ， 在 “代码 ”视图 中 可 以 找到 关于 可 选区 的 人 代码。 模板 参 数 在 head 
部 分 定义 : 

<!-- TemplateBesinEditable name="head" --> 

<!-- TemplateEndEditable --> 

<!-- TemplateParam name="OptionalRegionl1" type="boolean" value= false"” --> 

在 插入 可 选区 域 的 位 置 ， 将 出 现 类 似 于 下 列 代码 的 代码 : 

<!-- TemplateBeginlf cond= "Language==Engllish”--> 

<img Src="../030bx.j]pg"” width="268" height="264" /> 

<!-- TemplateEndIf --> 

从 模板 创建 的 网 页 的 head 区 中 也 将 插入 模板 参数 部 分 代码 。 如 末 网 页 中 需要 显示 可 选 
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区 内 容 时 ， 只 需 在 网 页 文档 代码 的 head 部 分 找到 上 述 人 代码 ， 把 其 中 的 value 值 设置 为 ttrue 即 
可 。 如 果 使 用 表达 式 ， 则 修改 cond 的 值 可 以 控制 可 选区 域 的 可 见 性 。 

模板 中 的 可 选区 域 是 不 可 编辑 的 ， 如 果 要 在 基于 模板 生成 的 页 面 中 修改 可 选区 域 ， 可 
把 光标 定位 于 可 选区 域内 部 ， 然 后 插入 可 编辑 区 。 作 为 可 选区 域 的 一 部 分 ， 可 选区 域内 的 
可 编辑 区 和 可 选区 同步 显示 和 隐 蕊 。 

此 外 ， 直 接 单 击 “ 插 入 ” 栏 “ 常 用 ”面板 加 * 图 标 中 的 下 拉 箭 头 ， 在 弹出 菜单 中 单 击 
eens ， 可 插入 “可 编辑 的 可 选区 域 ”。 


. 加 虽 示 :。、 达 区 灌 的 可 编 加 区 尖 时 不 能 先 选 定 内 容 ， 再 创建 可 编辑 的 可 选区 ， 
域 。 应 插入 区 域 ， 然 后 在 该 区 域内 插入 内 容 。 


12.2.5 ”定义 重复 区 域 


重复 区 域 是 可 以 在 基于 模板 的 页 面 中 复制 任 划 次 的 模板 部 分 。 和 草 复 区 域 通常 用 于 表 
格 ， 当 然 也 可 以 为 其 他 页 面 元 素 定 义 午 复 区 域 。 
重复 区 域 不 是 可 编辑 区 域 。 夺 要 使 午 复 区 域 中 的 内 容 可 编辑 ， 例 如 在 表格 单元 格 中 输 
入 文本 ， 则 必须 在 重复 区 域内 插入 可 编辑 区 工 。 
下 面 演示 创建 重复 区 域 的 一 般 步 又 。 
01 在 “文档 ”窗口 的 “设计 ”视图 中 ， 选 择 想 要 设置 为 重复 区 域 的 文本 或 内 容 ， 
或 将 插入 点 放 在 模板 中 想 要 插入 重复 区 域 的 位 置 。 本 例 选 择 文档 中 插入 的 一 幅 图 片 。 
02 执行 “搬入 ”/“ 模板 对 象 ”/ “重复 区域 ” a 命令 ， 或 单 击 “ 常 用 ”面板 上 加 
图 标 中 的 下 拉 箭头 , 在 弹出 的 上 下 文 菜单 中 单 击 国医 se 国 某 单项 , 弹出 图 12-11 所 示 的 “新 
建 重复 区 域 ” 对 话 框 。 
03 在 “新 建 重 复 区 域 ” 对 话 框 的 “名 称 ” 文 本 框 中 输入 重复 区 域 的 名 称 。 本 例 输 
入 “content”。 
04 蛙 击 “确定 ”按钮 ， 即 可 将 重复 区 域 插入 到 文档 中 ， 如 图 12-12 所 示 。 执 行 “ 文 
件 ”/“ 另 存 为 模板 ”命令 ， 将 创建 的 文档 保存 为 模板 。 


| (XHTYL)* x 
里 曼 区 二 未 鲍 
人 es 


FepeatFegionl 


此 区 域 将 多 次 出 现在 基于 该 模板 的 
立 档 中 。 


《 > 
<body> <table> <tr> <td> [Ro0%  v| 器 


图 12-11 “新 建 重 复 区 域 ”对 话 杠 图 12-12 ”插入 的 重复 区 域 
05 打 开 “ 模 板 ” 面 板 ， 在 刚 保存 的 模板 上 单 击 鼠标 右键 ， 从 弹出 的 址 下 文 沫 单 中 选 
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葛 双 司 可 | 


3) Dreommwearer C06 中 六 上 脾 入 门 与 粒 高 实例 条 碍 
择 “ 从 模板 新 建 ” 命 令 ， 新 建 一 个 文档 。 新 建 的 天 档 如 图 12-13 所 示 。 


06 生 单 击 页 面 中 的 加 写 (4) 按钮 划 可 以 在 页 面 中 添加 一 个 同样 的 图 片 ， 如 网 12-14 


二 mtitlet-3 GT)* 
S| 


所 示 。 
曹 政 区域 洒 亿 


旷 wntitlea-3 GT) 
模板 :定义 重复 区 域 


重 皖 区 城 永 鲍 


TT | 加 | | 
回 ”1 


0 -ENOL 
图 12-14 ”重复 效 来 


图 12-13 ”文档 效果 
在 图 12-13 和 图 12-14 所 示 的 页 面 上 点 击 鼠 标 ， 会 发 现 无 法 选择 图 片 ， 这 是 因为 还 没有 


定义 可 编辑 区 域 。 
此 时 , 基于 该 模板 生成 的 文档 效果 如 图 12-15 所 示 。 每 一 个 生成 的 重复 区 域 都 自动 添加 


07 昌 打开 保存 的 模板 选中 图 请 ， 并 插入 一 个 名 为 pic 的 可 编辑 区 域 ， 然 后 保存 文档 。 


了 一 个 名 为 pic 的 可 编辑 区 域 。 

08] 单 击 页 面 中 的 三 角形 按 钢 回 习 ， 可 以 在 各 个 重复 区 域 中 切换 。 选 中 某 个 重复 区 
域 后 , 单 击 减 号 (-) 按钮 局 ， 则 可 删除 当前 选中 的 重复 区 域 。 双 击 某 个 重复 区 域 中 的 图 片 ， 
可 打开 “选择 图 像 源 文件 ”对 话 框 ， 选 择 一 个 图 像 文 件 ， 即 可 符 换 重复 区 域 中 的 图 片 。 效 
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果 如 图 12-16 所 示 。 
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图 12-15 添加 可 编辑 区 域 的 效果 图 12-16 删除 一 个 重复 区 域 之 后 的 效果 


12. 2.6 定义 人 藤 套 模板 
风 套 模板 是 指 设计 和 制作 是 基于 一 个 模板 生成 的 模板 。 使 用 风 套 模板 可 以 创建 基 模 板 


的 变 体 ， 通 过 藤 套 多 个 模板 可 以 定义 精确 的 布局 。 
驱 套 模板 继承 基 模 板 中 的 可 编辑 区 域 ， 除 非 在 这 些 区 域 中 插入 了 新 的 模板 区 域 。 在 藤 


套 模 板 中 ， 可 以 在 基 模 板 的 可 编辑 区 域 中 进一步 定义 可 编辑 区 域 。 
下 和 耐 演 示 创 建 授 倒 模板 的 一 般 步 又 。 
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01 执行 以 下 操作 之 一 创建 一 个 基于 模板 的 新 文档 : 

打开 “模板 ”面板 ， 在 需要 的 基 模 板 上 单 击 鼠 标 右键 ， 然 后 在 弹出 的 下 拉 菜 单 中 选择 
“从 模板 新 建 ”命令 。 

执行 “文件 > /“ 新 建 ”命令 。 在 “新 建文 档 ” 对 话 框 中 ， 单 击 “模板 中 的 页 ”选项 卡 ， 
选择 包含 有 需要 的 模板 的 站 点 ， 然 后 在 文档 列表 中 双击 该 模板 以 创建 新 文档 。 文 档 窗口 中 
即 会 出 现 一 个 新 文档 

02】 将 光标 定位 在 新 文档 中 的 可 编辑 区 域 (例如 图 12-17 所 示 的 可 编辑 区 域 text》， 
然后 在 “常用 ”面板 中 选择 需要 的 模板 对 象 。 本 例 插入 一 个 重复 表格 ， 用 于 设置 菜单 栏 。 


Ca 
Gib | 


| 二 
mmtinstance:editable> [Rm QQ 100% v| 回 加 [| 544 x 391v 110K/3 秒 1 


图 12-17 基于 模板 生成 的 文档 


此 时 ， 会 弹出 一 个 对 话 框 ， 提 示 用 户 Dreamweaver 将 会 自动 将 此 文档 转换 为 模板 。 
03 9 单 击 “确定 ”按钮 ， 插 入 选中 的 模板 对 象 。 
04 按照 上 两 步 的 方法 ， 插 入 其 他 需要 的 模板 对 象 。 本 例 插 入 一 个 可 编辑 区 域 和 一 
个 可 选区 域 ， 分 别 用 于 放置 帖子 正文 和 版 权 声 明 。 
05 执行 “文件 ”/“ 另 存 为 模板 ”菜单 命令 保存 文档 。 至 此 ， 一 个 先 套 模板 创建 完 
成 了 ， 如 图 12-18 所 示 。 


击 << 模 板 >、 定义 蛟 套 模 板 . dwt (XHTYL) eel 


v 
mmtinstance: editable>Kp) [RI Q lo0% vv 回 同 [村 | 544 x 39lv ll0 kK/3 秒 1 


图 12-18 在 文档 中 添加 模板 对 象 生 成 人 套 模板 


此 外 ， 用 户 还 可 以 执行 “文件 ”/“ 另 存 为 模板 ”命令 ， 或 单 击 “ 常 用 ”面板 上 加 * 图 
标 中 的 下 拉 币 头 ， 在 弹出 菜单 中 单 击 目 臣 这 到， 将 一 个 基于 模板 生成 的 新 文档 保存 为 
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代 套 模板 。 
在 基于 舱 套 模板 生成 的 文档 中 一 可 以 添加 或 更 改 从 基 横 板 传递 的 可 编辑 区 域 〈 以 及 在 
狐 模 板 中 创建 的 可 编辑 区 域 》 中 的 内 容 。 


12.3 应 用 模板 


在 本 地 站 点 中 创建 模板 的 主要 目的 是 使 用 这 个 模板 创建 具有 相同 外 观 及 部 分 内 容 相 
同 的 文档 ， 使 站 点 风格 保持 统一 。 

在 文档 中 应 用 模板 有 两 种 方式 : 基于 模板 创建 新 文档 和 为 现 有 文档 应 用 模板 。 下 面 分 
别 进行 介绍 。 


12. 3.1 基于 模板 创建 文档 


本 革 前 面 讲述 的 例子 都 是 使 用 这 种 方式 创建 狐 文 档 ， 下 和 耐 对 这 种 方式 的 其 体操 作 步 又 
进行 说 明 。 

(1) 执行 “文件 ”/“ 新 建 ” 沫 单 命 令 ， 打 开 “ 新 建文 档 ” 对 话 框 。 

(2) 单 击 “ 狐 建文 档 ” 对 话 框 中 “模板 中 的 页 ”标签 ， 然 后 在 对 话 框 中 的 “站 点 ” 
下 拉 列 表 中 选择 要 应 用 的 模板 所 在 的 站 点 。 

(3) 在 “站 点 的 模板 ”列表 中 选择 需要 的 模板 文件 ， 并 单 击 选中 对 话 框 右 下 角 的 “ 当 
模板 改变 时 更 新 页 面 ” 复 选 杠 。 

(4) 单 击 “ 创 建 ” 按 钮 ， 即 可 基于 指定 的 模板 创建 一 个 新 文档 。 

(5) 按 编 辑 普通 HIML 文 梢 的 方法 编辑 新 文档 的 页 面 内 容 。 

此 外 ， 用 户 还 可 以 直接 在 需要 的 模板 文件 上 单 击 鼠标 右键 ， 然 后 在 弹出 的 上 下 文 某 单 
中 选择 “从 模板 新 建 ” 命 令 ， 即 可 基于 指定 的 模板 生成 一 个 新 文档 。 


12. 3. 2 为 文档 应 用 模板 


为 已 有 的 文档 应 用 模板 之 前 ， 首 先 应 确保 模板 已 定义 了 可 编辑 区 域 ， 否则 在 应 用 模板 
时 ，Dreamweaver 会 弹出 一 个 提示 框 ， 提 示 用 户 所 应 用 的 模板 中 没有 任何 可 编辑 区 域 。 

为 文档 应 用 模板 的 一 般 操 作 步 又 如 下 : 

(1) 打开 一 个 普通 文档 。 

(2) 执行 “修改 ”/“ 模 板 ”/“ 应 用 模板 到 页 ”菜单 命令 ， 打 开 图 12-19 所 示 的 “ 选 
择 模 板 ” 对 话 框 。 

(3) 在 “站 点 ”列表 中 选择 要 应 用 的 模板 所 在 的 站 点 ， 然 后 在 “模板 ”列表 中 选择 
需要 的 模板 。 本 例 选 择 本 章 制 作 的 模板 nav。 

(4) 选中 “选择 模板 ”对 话 框 底部 的 “ 当 模 板 改 变 时 更 新 页 面 ” 复 选 框 。 

(5) 单 击 “ 选 定 ”按钮 ， 弹 出 如 图 12-20 所 示 的 “不 一 致 的 区 域名 称 ” 对 话 框 。 提 示 
用 户 此 文档 中 的 某 些 区 域 在 新 模板 中 没有 相应 区 域 。 

如 果 文 档 中 的 内 容 能 目 动 指定 到 模板 区 域 ， 则 不 会 弹出 此 对 话 框 。 
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(6) 选中 列表 中 不 一 致 的 区 域名 称 ， 如 图 12-20 所 示 ， 此 时 “将 内 容 移 到 新 区 域 ” 后 
面 的 下 拉 列 表 变 为 可 用 状态 。 


此 净 档 中 的 某 些 区 域 在 新 模板 中 没有 相应 区 域 。 


局 可 编辑 区 域 


: Document body < 未 解析 》> 
Document head < 未 解析 》> 
多 I | 机 
当 模板 改变 时 更 新 页 面 是 
一 击 [二 
图 12-19 “ 选择 模板 对 话 框 图 12-20 “不 一 到 的 区 域名 称 » 对 话 框 


(7) 从 下 拉 列 表 中 选中 nav 梗 板 中 定义 的 可 编辑 区 域名 称 text。 此 时 ， 不 一 致 的 区 域 
名 称 列 表 中 ， 选 定 的 区 域 后 面 的 “< 未 解析 >” 变 为 指定 的 区 域名 称 text。 

如 条 选择 “不 在 任何 地 方 ” 选 项 ， 则 将 该 内 容 从 文档 中 删除 。 

(8) 蛙 击 “用 于 所 有 内 容 ” 按 钮 ， 将 所 有 末 解 析 的 内 容 移 到 选 定 的 区 域 。 

(9) 单 击 “确定 ”按钮 应 用 模板 。 应 用 模板 前 后 的 页 面 效 果 如 网 12-21 所 示 。 


2 将 模板 应 用 于 现 有 文档 时 ， 该 模板 将 用 其 标准 化 内 容 替 换文 档 内 容 。 所 以 
将 模板 应 用 于 页 面 之 前 ， 最 好 备份 页 面 的 内 容 


此 外 ， 用 户 也 可 以 直接 在 “模板 ”面板 中 用 鼠标 拖 动 模板 到 要 应 用 模板 的 文档 中 ， 
单 击 “模板 ”的 部 的 “应 用 ” 控 钮 ， 将 指定 的 模板 应 用 到 当前 编辑 的 文档 。 


人 (XHTHL)* 下 El 

本 Rp 
| (TD SE 
ee 1 执行 文件 新建 条 间 命 人 打开 新建 
本 章 前 面 讲述 的 例子 都 是 使 用 这 种 方式 创建 新 文档 ， 下 面 ,二 
2. 单 击 “ 新 建文 档 对 话 性 中 模板 中 的 页 " 标 
1 打开 新 建文 档 对 话 和 | 签 ， 然 后 在 对 话 柜 中 的 "站 点 "下 拉 列 表 中 和 


择 要 应 用 的 模板 所 在 的 站 点 。 
3， 在 “站 点 的 模板 "列表 中 选择 需要 的 模板 文 | 一 
件 ， 并 单 击 选中 对 话 框 右 下 角 的 “ 当 模 板 改 变 


单 击 档 "对 话 中 的 页 扒 后 在 对 
i 中 的 "站 点 "下 拉 列 中 选择 要 应 用 的 模板 所 在 的 站 点 


在 “站 点 的 模板 * 列 天 中 迁 择 需要 的 向 板 文 件 , 并 单 击 选 时 更 新 页 面 " 复 选 框 。 
中 对 话 框 右 下 角 的 - 当 模板 改变 时 更 新 页 面 " 复 选 框 。 4. 单 击 “ 创 建 EP 即 可 基于 指定 的 模板 创 
4. 单 击 “ 创 建 "按钮 ， 即 可 基于 指定 的 模板 创建 一 个 新 文档 = 
5. 按 编 | 的 方法 编辑 新 文 
5， 按 编辑 普通 HTMI 文档 的 方法 编辑 新 文档 的 页 面 内 容 。 CR) 的 页 面 证 内 人 a 
< E> 
<body> [NR] 区 QIloox v| 回转 | 425 [<mmtirnstarce:editabLe><p> | RR | 天 QIloo% vy| 回 图 [ Id x 554v1110R75 


图 12-21 ”应 用 模板 前 后 的 页 面 效果 


12. 3.3 ”修改 模板 并 更 新 站 点 
如 果 要 对 模板 内 容 进 行 修改 ， 可 以 在 “模板 ”面板 中 双击 要 编辑 的 模板 名 称 ， 或 选中 
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更 马 司 避 | 


FD), DreaWERURERECS6 中 立 版 入 门 与 提高 实例 起 


模板 之 后 ， 单 击 “ 模 板 ” 面 板 底部 的 “编辑 ”按钮 区， 即 可 打开 模板 进行 编辑 。 

在 Dreamweaver 中 ， 如 果 修 改 了 模板 ，Dreamweaver CS6 会 询问 是 否 修改 应 用 该 模板 的 
所 有 了 网页。 用 户 也 可 以 手动 更 新 站 点 中 的 页 和 面 。 利 用 Dreamweaver 强 大 的 站 点 管理 功能 ， 
用 户 可 以 轻松 地 批量 更 狐 所 有 应 用 同一 模板 的 文档 风格 。 

更 狐 站 点 中 所 有 应 用 当前 模板 的 网 页 的 具体 操作 步骤 如 下 : 

(1) 对 模板 进行 修改 之 后 ， 执 行 “ 修 改 ”/“ 模 板 ”/“ 更 新 页 面 ”命令 ， 弹 出 图 12-22 
所 示 的 “更 狐 页 耐 ” 对 话 框 。 


查看 CI): 攻 个 ws 点 ”图 test 


更 新 : 站 | 库 项 目 (L) 


中 神 板 癌 ) 


口 显示 记录 0 
状态 : 


图 12-22 “更 新 页 面 ”对 话 框 


(2) 在 对 话 框 中 的 “查看 ”下 拉 列 表 框 中 ， 选 择 页 和 面 更 新 的 范围 。 

如 果 选 择 “ 整 个 站 点 ”选项 ， 可 以 在 后 面 的 站 点 下 拉 列 表 框 中 指定 要 更 新 的 站 点 ， 并 
对 指定 的 站 点 中 所 有 的 文档 进行 更 新 。 

如 果 选 择 “ 文 件 使 用 ”选项 ， 可 以 在 后 面 的 下 拉 列 表 框 中 指定 要 更 新 的 模板 ， 并 对 让 
扩 中 所 有 使 用 该 模板 的 文档 进行 更 新 。 不 使 用 该 模 极 的 文档 不 会 被 更 新 。 

(3) 在 “更 新 ”后 面 的 复 选 框 中 选择 “模板 ”， 表 明 该 操作 更 新 的 是 站 点 中 的 模板 
及 基于 模板 生成 的 页 面 。 

(4) 早 击 “开始 ”按钮 ， 即 可 将 模板 的 更 改 应 用 到 站 点 中 指定 范围 内 的 网 页 ， 并 在 
“状态 ” 栏 显 示 更 新 的 成 功 、 失 败 等 信息 。 


12. 3.4 实例 制作 之 使 用 模板 生成 其 他 页 面 


在 前 面 的 章节 中 ， 已 制作 了 个 人 网 站 实例 的 主页 index.html， 并 将 其 另存 为 模板 
index.dwt。 由 于 该 网 站 实例 中 的 页 面 布 局 基本 相同 ， 因 此 ， 在 本 蔬 中 我 们 将 基于 模板 
index.dwt 制 作 “ 道 听 途 说 ”的 链接 页 面 ， 基 体 步 又 如 下 : 

01 在 “模板 ”管理 面板 的 模板 列表 中 石 击 index.dwt， 然 后 在 弹出 的 上 下 文 末 单 中 
选择 “从 模板 新 建 ” 人 命令， 新 建 一 个 未 命名 的 文档 。 

在 该 文档 中 ， 除 可 编辑 区 域 content 以 外 ， 其 他 区 域 均 不 可 编辑 。 

02 将 第 一 行 的 “欢迎 光临 我 的 小 屋 ” 修 改 为 “神农 架 材 歌 ”。 

03 删除 content 区 域 第 二 行 的 图 片 ， 然 后 单 击 属性 面板 上 的 折 分 单元 格 图 标 ， 将 其 
拆 分 为 两 行 。 

04 将 光标 置 于 第 一 行 的 单元 格 中 ， 插 入 需要 的 文本 ， 如 图 12-23 所 未 。 

05 在 第 二 行 单元 格 中 插入 一 条 水 平分 隔 线 。 将 光标 置 于 第 三 行 , 然后 在 属性 面板 上 
设 症 单元 格 内 容 的 水 平 对 齐 方式 为 “居中 对 齐 ”。 

06 在 第 三 行 输入 文本 “最 新 更 新 ”， 单 击 L_ 涧 招 按钮 ， 在 弹出 的 “新 建 CSS 
规则 ”对 话 框 中 设置 选择 器 类 型 为 “类 ”， 选 择 器 名称 为 .fontstyle， 规 则 定义 位 置 为 “新 
238 


建 样 式 表 文件 ”， 单 击 “ 确 定 ” 按 钮 保存 文件 。 然 后 在 弹出 的 规则 定义 对 话 框 中 设置 字体 
为 “方正 粗 倩 简体 ”， 字 号 为 “x-large”， 颜 色 为 #F60。 

07 肯 删除 第 四 行 的 跑马 灯 文 本 ， 但 保留 <marquee> 标 记 。 然 后 输入 更 新 的 文章 标题 ， 
并 分 别 在 属性 面板 中 议 置 其 链接 目标 和 目标 文件 的 打开 方式 。 

由 于 在 模板 index.dwt 中 设置 了 超 链 接 的 文本 颜色 为 绿色 且 无 下 划 线 ， 因 此 链接 文本 均 
显示 为 绿色 。 如 图 12-24 所 示 。 


曾 ctastpabvwmacotVblosveriteg hinl Cime) 


ee 
曾 caotyabvewemcotVblosveiteg htal Cimels 器 


fontstyle 


, 4 PTR TE TR TR TN 
旋律 ， 锯 寻 神农 架 人 的 情 三 轨 这， 

坷 鼓 的 演唱 ， 引 领 人 们 回 到 众生 首 驳 的 麻 林 浑 处 ， 山 民 注 唱 松 鼓 
时 翁 ， 地 是 面 对 森 林 群 曾 ， 他 们 借助 软 丙 来 表达 自己 和 的 存在 、 豪 社 
与 不 刷 群 田 ， 或 者 向 告 俩 口 的 愧 兽 ， 荣 止 将 庄 乏 疙 掉 写 嫉 天 。 神农 菏 
? 喜 的 蔡 招 ， 直 豪 而 蚁 转 ， 您 扬 而 仿 类 促 节 赛 ， 它 是 原始 山 民 时 人 心 的 
声 ， 因 此 还 须 借助 打击 曾 豚 壮 再 增色 ， 是 文物 级 的 民 考 ， 

融 燃 短 火 ， 彻 夜 唱 想 新 衣 ， 其 挫 壮 与 正 谅 ， 被 缩 了 人 兽 共 存 的 历 
记忆 ， 祖 鼓 将 是 一 个 历史 的 见证 ， 它 在 神农 架 原 六 麻 林 之 中 回 沁 ， 

首 人 人 必 会 的 歌 。 


神农 芝 郴 怠 
”和 莹 症 神 家 菏 的 殉 革 和 在 守 松 之 时 用 来 没 漂 兰 兰 ， - 尽 防 库 粕 


- 5 来， 间 鼓 咸 了 神农 架 的 男女 用 以 传递 情爱 、 炳 诉 心 南 
gee 


“ 炎 大 神农 氏 架 木 为 樟 ， 有 册 千 农具， 红 民 被 本 ， 让 视 容 闭 光 半 


和 的 神农 架 显露 出 无 限 的 生机 ， 灯 鼓 以 强烈 的 节奏 ， 应 和 着 山林 中 动情 
的 旋律 ， 追 寻 神 农 架 人 的 情感 轨 迹 ， 
材 昔 的 演唱，5| 畏 人 们 回 到 众生 狂欢 的 麻 林 深 处 ， 山 民 深 唱 样 鼓 第 二 烽 纽 扣 
的 时 候 人 人 人 A 
下 的 六 津 ， 玉带 而 蚁 A 烛 所 帮 全 二 改 节 守 ， 此 是 原 类 山 民 时 不 的 人 
胶南 因此 还 : 页 借助 打击 结 四 壮 再 增色 ， 是 文物 级 的 民 一 漠 芒 珠 的 爱情 
起 宰 喜 ， 其 雁 壮 与 想 凉 ,浓缩 了 人 兽 共 存 的 历 人 
中 记忆 ， 辑 鼓 将 是 一 个 历史 的 多 证 ， 它 在 神农 架 原 郊 许 林 之 中 回 预 ， 一 占 子 ， 一 各 证 
一 首 人 人 必 会 的 歌 。 “| Me “| 
€ >» € 》 
Cir> Cd 人 wase>rp » | 和 Fe ,1 EE 面 So0 = 2 WE/2 Wecrle 肯 n> <tr> td wamee Cp > 1 CG 10r v 用 省 a 三 S20 = 4 本 /2 孙 Wicri 肯 
图 12-23 ”插入 文本 图 12-24 应 用 样式 的 超 链接 文本 


08 “道听途说 ”的 链接 页 面 制 作 完 毕 。 
如 果 要 制作 其 他 文章 的 页 面 ， 可 以 将 该 页 面 另存 为 模板 ， 并 将 文档 正文 部 分 定义 为 编 
辑 区 域 ， 然 后 基于 该 模板 生成 新 的 页 面 。 只 要 更 改 文 草 标 题 和 内 容 ， 即 可 完成 一 个 页 面 的 
制作 5 
在 制作 “伊人 风尚 ”的 链接 页 面 photo.html 的 过 程 中 , 为 便于 读者 理解 , 没有 使 用 模板 ， 
而 是 直接 在 index.html 的 基础 上 修改 生成 。 为 了 便于 网 站 以 后 的 更 狐 和 维护 , 最 好 基于 模板 
index.dwt 生 成 页 面 然 后 修改 。 有 关 制 作 步 又 不 再 葡 述 。 


12.4 管理 模板 


在 Dreamweaver 中 ， 用 户 可 以 对 模板 文件 进行 各 种 管理 操作 。 例 如 重 命 名 、 删 除 、 
离 文档 所 附 模 板 等 。 


12.4.1 重 命名 模板 文件 


站 点 中 的 模板 都 存储 在 本 地 站 点 根 目 录 下 的 Templates 目 录 下 ， 在 “模板 ”面板 的 模板 
列表 中 也 可 以 看 到 当前 站 点 中 的 所 有 模板 。 如 果 要 快速 地 在 众多 模板 列表 中 找到 需要 的 模 
板 ， 可 以 将 模板 命名 为 易 记 、 方 便 识别 的 名 称 。 如 果 要 重 命 名 模板 文件 ， 可 以 执行 以 下 操 
‘Es 


(1) 在 “模板 ”列表 中 单 击 要 重 命名 的 模板 ， 然 后 在 其 名 称 的 位 置 再 次 单 击 ， 即 可 
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3) Dreomwearer C96 中 立 及 入 门 己 粮 高 实例 末末 
By dt 


使 其 名 称 文本 框 处 于 可 编辑 状态 。 
(2) 输入 需要 的 独 名 称 。 
Bg 按 下 Enter 键 ， 或 在 模板 名 称 区 域 以 外 的 任意 空 日 区 域 单 击 ， 即 可 重 命名 模板 。 
命名 模板 之 后 , 系统 将 弹出 一 个 对 话 框 , 询问 用 户 是 售 要 更 新 已 应 用 此 模板 的 文档 。 


12.4.2 删除 模板 


(1) 在 “模板 ”面板 的 模板 列表 中 选中 要 删除 的 恒 板 项 。 

(2) 单 击 “ 模 板 ” 面 板 底部 的 “删除 ”按钮 画 ; 或 单 击 鼠标 右键 ， 从 弹出 菜单 中 选 
择 “ 删 除 ” 命 令 ， 或 者 直接 按 下 键盘 上 的 Delete 键 。 

执行 以 上 操作 之 后 ，Dreamweaver 会 打开 一 个 对 话 框 ， 询 问 用 户 古 全 确认 要 删除 选 定 
的 模板 。 

(3) 单 击 “ 是 ”按钮 ， 即 可 将 指定 模板 从 站 点 中 删除 。 


12. 4. 3 分离 文档 所 附 模板 


通过 模板 创建 文档 之 后 ， 文 档 束 和 模板 密 不 可 分 了， 只 要 修改 模板 ， 束 可 以 自动 对 文 
档 进 行 更 独 ， 通 茹 将 这 种 文档 称 作 附 看 模板 的 文档 。 如 果 布 望 能 随意 地 编辑 应 用 了 模板 的 
文件 ， 可 以 将 文档 从 模板 中 分 离 ， 即 断 开 与 模板 的 链接 。 

(1) 打开 应 用 了 模板 的 文档 。 

(2) 执行 “修改 ”/“ 模 板 ”/“ 从 模板 中 分 离 ” 采 单 命令 ， 即 可 将 文档 与 模板 中 分 离 

文档 与 所 附 模板 分 离 之 后 ， 该 文档 变 为 一 个 普通 文档 ， 文 档 中 不 再 有 模板 标记 。 如 图 
12-25 右 图 所 示 。 

文档 从 模板 中 分 离 出 来 之 前 ， 在 左上 角 可 以 看 到 可 编辑 区 域 的 名 称 和 标识 ， 右 上 角 可 
以 看 到 基 模 板 的 名 称 。 如 12-25 左 图 所 示 。 


a [是 wtataeea [XHTHL)* - 口 X 
sr- 在 Dreamweaver 中 ， 模 梳 是 一 种 以 dwt 为 扩 展 ” 
Bd Ee ] 中 | en 全 可 纺 悍 区 。 
| 0 可 编辑 
2 二 (ny 锁定 区 域 包含 了 在 所 有 页 面 中 共有 的 元 素 , 
(rp 借 板 由 两 和 区 斌 组 记 ， 锁 定 区 和 可 多 加 区 ， i 
锁定 区 坡 包 售 了 在 所 有 页 而 中 共有 的 元 紊 ， 等 。 第 一 次 创建 借 饭 时 ， 押 有 的 区 成 者 是 锁 
即 构成 页 面 的 基本 框架 ， 比 如 导航 条 、 标 是 定 的 。 页 六 加 区 吉 是 要 拓 用 作 需 要 指定 
等 。 御 一 次 创建 模板 时 ， 所 有 的 区 域 都 是 铭 Rs El 通过 编辑 
定 的 。 而 可 编辑 区 域 是 根据 用 户 需要 而 指定 eae | 可 以 得 到 与 模板 风格 一 致 ， 
了 的 用 于 设置 页 而 不 同 内 容 的 区 域 ， 通 过 编辑 i ， 但 又 有 所 不 同 的 新 的 网 页 。 
DE 可 编辑 区 的 内 容 ， 可 以 得 到 与 异 板 风格 一 致 
， 但 又 有 了 所 不 同 的 新 的 网 页 . 
< 上 》 - 一 四 闻 | > 和 
(alins tn sdi labley Cat) 包 100% vv 国 同 I sz3 x 354v LOK/3 <bod [RR] 订 Q lo0% v| 国 男 画 480 x 342v| 110 


图 12-25 ”从 模板 中 分 离 前 后 的 效果 


12.5 应 用 库 项 目 


在 Dreamweaver 中 ， 可 以 将 任何 页 面 元 素 ， 如 文本 、 表 单 、 表 格 、 图 像 、 导 航 条 ， 其 
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至 Java 程 序 、ActiveX 控 件 和 插件 创建 为 库 项 目 。 库 项 目 是 一 种 扩展 名 为 .bi 的 特殊 文件 ， 
所 有 的 库 项 目 部 被 保存 在 本 地 站 点 根 目 录 下 一 个 名 为 Library 的 文件 夹 中 。 每 个 站 扣 部 有 日 
己 的 库 。 使 用 库 项 目 时 ，Dreamweaver 个 是 在 网 页 中 插入 库 项 目 ， 而 是 插入 一 个 指向 库 项 
目的 链接 。 也 隐 是 说 ，Dreamweaver 将 问 文 梢 中 插入 该 项 目的 HIML 源 代 人 码 副本 ， 并 诬 加 
一 个 包含 对 原始 外 部 项 目的 引用 的 HTML 注 释 。 

总 而 言 乙 ,利用 库 可 以 实现 对 文档 风格 的 维护 。 可 以 将 茶 坚 文档 中 的 共有 内 容 定义 为 
库 项 目 ， 然 后 放置 在 文档 中 。 用 户 可 以 在 任何 时 间 修 改 库 项 目 ， 编 辑 完成 后 ， 可 以 立即 更 
狐 或 各 后 更 新 站 点 中 使 用 库 项 目的 负面。 


\ 注意 : 
2 Dreamweaver 需要 在 网 页 中 建立 来 自 每 一 个 库 项 目的 相对 链接 。 库 项 目 应 
该 始终 放置 在 Library 文件 夹 中 ， 并 且 不 应 向 该 文件 夹 中 添加 任何 非 .lbi 的 文件 。 


12.5.1 库 面 板 的 功能 


利用 “ 库 ” 面板 可 以 完成 大 多 数 的 库 项 目 操作 。 选择 “窗口 ” /资源 ”命令 ， 调 出 “ 资 
源 ” 面 板 。 单 击 “ 资 源 ” 面 板 左 侧 的 库 图 标 按钮 出 ， 即 可 切换 到 “ 库 ” 面 板 ， 如 图 12-26 
所 示 。“ 库 ”和 面板 上 半 部 分 显示 当前 选择 的 库 项 目的 预 唤 效 末 ，; 下 半 部 分 则 是 当前 站 所 
中 所 有 库 项 目的 列表 。 


ETIITIITDI 


图 12-26 “ 库 ” 和 面板 


“ 库 ” 面 板 底部 的 按钮 是 库 项 目 操作 的 快捷 菜单 。 各 个 按钮 的 作用 如 下 : 
人 @， 刷 新 站 点 列表 ， 更 新 库 项 目 ，。 

司 ， 在 库 列表 中 新 建 一 个 未 命名 的 库 项 目 。 

国 ， 编 辑 当前 在 库 列表 中 选择 的 库 项 目 。 

面 ， 删 除 当前 在 库 列表 中 选择 的 库 项 目 。 

擂 久 ]， 将 在 库 列表 中 选中 的 库 项 目 插入 到 当前 文档 中 。 


12. 5.2 创建 库 项 目 


在 Dreamweaver 中 ， 可 以 将 单独 的 文档 内 容 定义 为 库 ， 也 可 以 将 多 个 文档 内 容 的 组 合 
定义 成 库 。 在 不 同 的 文档 中 放 入 相同 的 库 项 目 时 ， 可 以 得 到 完全 一 致 的 效果 。 
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下 面 演示 创建 库 项 目的 一 般 步 又 。 

01 新建 一 个 HTML 文 档 ， 并 在 “页 面 属性 ”面板 中 将 “链接 文字 ”的 颜色 设置 为 
白色 ， 且 始终 无 下 划 线 。 

02 在 “设计 ”视图 中 插入 一 个 二 行 四 列 的 表格 。 选 中 第 一 行 , 单 击 属性 面板 上 的 钙 
按钮 合并 单元 格 ， 然 后 在 合并 后 的 单元 格 中 插入 一 幅 图 片 。 

03 选中 第 二 行 单元 格 ， 在 属性 面板 上 将 其 背景 色 设置 为 #81C58C 〈 果 绿色 ) 。 
后 在 单元 格 中 输入 文字 ， 并 为 文本 添加 超级 链接 。 此 时 的 效果 如 图 12-27 所 示 。 


图 12-27 ”将 保存 为 库 项 目的 页 面 元 素 
04 昌 选中 将 保存 为 库 项 目的 整个 表格 ， 执 行 以 下 操作 之 一 将 选中 的 内 容 添 加 为 库 项 


将 选中 的 内 容 拖 动 到 “ 库 ” 面 板 的 库 项 目 列表 中 。 
单 击 鼠标 右键 ， 从 弹出 来 单 中 执行 “增加 对 象 到 库 ” 命 令 
选择 “修改 ”/“ 库 ”/“ 增 加 对 象 到 库 ” 沫 单 命 令 。 
单 击 “ 库 ” 面 板 底部 的 “新 建 库 项 目 ” 按 钮 名 | 
05 为 狐 建 的 库 项 目 输入 名 学 ， 然 后 按 Enter 键 。 
此 时 ， 该 库 项 目 对 象 将 出 现在 库 列 表 中 。 


12. 5. 3 使 用 库 项 目 


创建 了 库 项 目 之 后 ， 豆 可 以 在 需要 库 项 目 内 容 的 页 面 中 谍 加 库 项 目 。 当 回 页 面 添加 库 
项 目 时 ， 将 把 库 项 目的 实际 内 容 以 及 对 该 库 项 目的 引用 一 起 插入 到 文档 中 。 

下 面 演示 在 页 面 中 使 用 库 项 目的 一 般 步 又 

01 将 插入 点 定位 在 文档 窗口 中 要 插入 库 项 目的 位 置 。 

02 打开 “ 库 ” 和 面板 ， 从 库 项 目 列表 中 选择 要 插入 的 库 项 目 。 

03 生 单 击 “ 库 ”面板 左下 角 的 上 本 人 A 按钮 ,或 直接 将 库 项 目 从 “ 库 ” 面 板 中 拖 到 文 
档 窗口 中 。 

此 时 ， 文 档 中 会 出 现 库 项 目 所 表示 的 文档 内 容 ， 同 时 以 淡 黄 色 高 之 显 示 ， 表 明 它 是 一 
个 库 项 目 ， 如 图 12-28 所 示 。 

在 “文档 ”窗口 中 ， 库 项 目 是 作为 一 个 整体 出 现 的 ， 用 户 无 法 对 库 项 目 中 的 局 部 内 容 
进行 编辑 。 如 果 和 希望 只 添加 库 项 目 内 容 而 不 希望 它 作 为 库 项 目 出 现 ， 可 以 按 住 Cg 键 的 同 
时 ， 将 库 项 目 从 “ 库 ” 面 板 中 拖 动 到 “文档 ”窗口 中 。 此 时 插入 的 内 容 以 普通 文档 的 形 陈 
出 现 ， 可 以 对 其 进行 任 曹 编辑， 如 图 12-29 所 示 。 


12.6 管理 库 项 目 


企 Dreamweaver 中 ， 用 户 可 以 对 库 项 目 进 行 各 种 管理 操作 ， 例 如 重 命 名 、 有 删除 、 将 库 
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项 目 从 源 文 件 中 分 离 等 。 


一 
| 5. 2 创 洁 库 夺 是 .html (XHTYL) = EE Vpotpub\eeereor\ chi el2, 5 biny XI) > 2- 
从 
和 9 
kt | ECL 
v 
> > 
一 dyr> <hl. fontstyle> Ly QQ 100% v| 回回 中 41l say> Rable NO RQ ior ~- 国 刚 二 ! (5: 2+ 


图 12-28 在 文档 中 插入 库 项 目的 效果 图 12-29 仅 插入 库 项 目的 内 容 


12.6.1 编辑 库 项 目 


编辑 库 项 目 首先 要 打开 库 项 目 。 打 开 库 项 目 有 以 下 儿 种 方式 : 

@ 在 “ 库 ” 面 板 的 库 项 目 列表 中 选中 要 编辑 的 库 项 目 ， 然 后 单 击 “ 库 ”面板 撒 部 的 
“ 顷 辑 ”网 标 投 钮 。 

@ 打开 一 个 插入 了 库 项 目的 文档 ， 选 中 库 项 目 ， 在 属性 面板 上 单 击 “ 打 开 ” 按 钮 。 

@ 在 “ 库 ” 面 极 的 库 项 目 列表 中 双击 要 编辑 的 库 项 目 。 

打开 月 车 项 目 后 ， 即 可 像 编 辑 图 片 、 文 本 一 样 编辑 库 项 目 。 


一 提示 : 编辑 库 项 目 时 ，CSS 样式 面板 不 可 用 ， 因 为 库 项 目 中 只 能 包含 body 元 素 ， 


CSS 样式 表 代 码 却 可 以 插入 到 文档 的 head 部 分 。 “页 面 属性 ”对 话 框 也 不 可 用 ， 
为 库 项 目 中 不 能 包含 body 标记 或 其 属性 


库 项 目 编 辑 完 成 之 后 ， 保 存 库 项 目 ， 此 时 Dreamweaver 会 弹出 一 个 “更 新 库 项 目 ” 对 
话 框 ， 询 问 用 户 是 否 要 更 狐 使 用 了 已 修改 的 库 项 目的 文件 。 
单 击 “ 更 新 ”按钮 ， 则 对 库 项 目 所 做 的 更 改 将 更 新 到 页 面 中 ， 人 否则 不 更 新 。 


[二 


12.6.2 重 命 名 、 删 除 库 项 目 


站 点 中 的 库 项 目 都 存储 在 本 地 站 点 根 目 录 下 的 Library 目 录 下 ， 在 “ 库 ” 面 板 的 库 项 目 
列表 中 也 可 以 看 到 当前 站 点 中 的 所 有 库 项 目 。 如 果 要 快速 地 在 众多 的 库 项 目 中 找到 需要 的 
库 项 目 ， 可 以 将 库 项 目 命名 为 易 记 、 方 便 识 别 的 名 称 。 

如 果 要 午 命 名 库 项 目 ， 执 行 以 下 操作 。 

(1) 在 “ 库 ” 面 板 的 库 项 目 列表 中 单 击 要 重 命 名 的 库 项 目 ， 然 后 在 其 名 称 的 位 置 再 
次 单 击 ， 即 可 使 其 名 称 文本 框 处 于 可 编辑 状态 。 

(2) 输入 需要 的 新 名 称 。 

(3) 按 下 Enter 键 ， 或 在 库 项 目 名 称 区 域 以 外 的 空白 位 置 单 击 ， 即 可 重 命名 库 项 目 。 

重 命名 库 项 目 之 后 ，Dreamweaver 将 弹出 一 个 对 话 框 ， 询 问 用 户 是 否 要 更 新 已 使 用 此 
库 项 目的 文档 。 
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如 采 不 再 需要 某 个 库 项 目 ， 最 好 将 其 删除 ， 以 太 约 资源 。 删 除 库 项 目的 步 绝 如 下 。 
(1) 在 “ 库 ” 面 板 的 库 项 目 列表 中 选中 要 删除 的 库 项 目 。 
(2) 单 击 “ 库 ”面板 底部 的 “删除 ”按钮 盏 ， 或 单 击 鼠标 右键 ， 从 弹出 菜单 中 选择 
“删除 ”命令 ;或 者 直接 按 下 键盘 上 的 Delete 键 。 
执行 以 上 步 又 之 后 ，Dreamweaver 会 打开 一 个 对 话 框 ， 询 问 用 户 是 否 确 认 要 删除 选 定 
的 库 项 目 。 
(3) 单 击 “ 是 ” 投 钮 ， 即 可 将 指定 的 库 项 目 从 站 点 中 删除 。 


y 注意 : 


心 一 删除 库 项 目的 操作 只 是 删除 了 库 项 目 文件 ， 且 删除 后 无 法 恢复 。 但 已 经 插 


入 到 文档 中 的 库 项 目 内 容 并 不 会 被 删除 。 


12.6.3 重新 创建 库 项 目 


上 一 贡 提 到 过 ， 删 除 库 项 目 操作 不 可 恢复 ， 但 该 操作 不 会 删除 已 插入 到 页 面 中 的 库 项 
目 内 容 。 如 果 不 小 心 误 删 除了 有 茶 个 库 项 目 ， 利 用 Dreamweaver 提 供 的 “重新 创建 ” 蕊 能 ， 
可 以 恢复 以 前 的 库 项 目 文件 。 

价 单 地 说 ，“ 重 新 创建 ” 束 是 将 “文档 ”窗口 中 以 前 插入 的 库 项 目 内 容重 新 生成 库 项 
目 文 件 。 例 如 ， 在 库 项 目 列表 中 删除 库 项 目 topbar.lbi， 然 后 打开 使 用 了 该 库 项 目的 文件 ， 
会 发 现 插 入 的 库 项 目的 内 容 还 在 。 选 中 将 恢复 为 库 项 目的 内 容 , 然后 单 击 属性 面板 上 的 “ 重 
潮 创建 ”按钮 ， 即 可 重新 创建 一 个 名 为 topbar.l]bi 的 库 项 目 。 

如 果 库 项 目 列 表 中 已 有 了 一 个 名 为 topbar.lbi 的 库 项 目 ， 则 Dreamweaver 会 显示 一 个 对 
话 框 ， 提 示 用 户 使 用 该 功能 将 履 盏 现存 的 库 项 目 文件 。 

如 果 是 重建 原来 没有 的 库 项 目 ， 执 行 “ 重 新 创建 ”命令 之 后 ， 库 项 目 不 会 立即 出 现在 
库 项 目 列表 中 。 用 户 可 以 单 击 “ 库 ”面板 底部 的 “刷新 站 点 列表 ”图 标 按钮 ， 这 样 残 可 以 
在 库 项 目 列 表 中 看 到 重建 的 库 项 目 了 。 


12. 6.4 蝎 靳 页 面 和 站 点 


编辑 或 重 命 名 库 项 目 以 后 ，Dreamweaver 会 提示 用 户 更 新 页 面 。 如 果 当 时 选择 了 “不 
更 新 ”按钮 ， 还 可 以 在 以 后 手动 选择 更 新 页 面 命令 。 
更 新 整个 站 点 或 所 有 使 用 特定 库 项 目 文档 的 操作 步骤 如 下 : 
(1) 执行 “修改 ”/“ 库 ”/“ 更 新 页 面 ” 沫 单 命令 ， 弹 出 “更 新 页 和 面 ” 对 话 框 。 
(2) 在 对 话 框 中 的 “得 看 ”下 拉 列 表 框 中 选择 要 更 新 的 页 面 范 围 。 有 关 选 项 的 说 明 
己 在 本 章 12.3.3 节 进行 了 说 明 ， 在 此 不 再 重复 。 
(3) 在 “更 新 ”后 面 的 复 选 框 中 选择 “ 库 项 目 ”， 表 明 要 更 新 的 是 当前 站 点 中 使 用 
了 库 项 目的 页 面 。 
(4) 单 击 “ 开 始 ” 按 钮 ， 即 可 将 库 项 目的 更 改 应 用 到 站 点 中 指定 范围 内 的 网 页 。 
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12. 6.5 将 库 从 源 文件 中 分 离 


与 模板 相似 ， 在 页 面 中 使 用 了 库 项 目 以 后 ， 该 文档 中 的 库 项 目 内 容 就 和 库 项 目 密 不 可 

分 了 ， 只 要 修改 了 库 项 目 ， 就 可 以 目 动 对 文档 中 相应 的 部 分 进行 更 新 。 如 果 布 望 能 随意 地 

编辑 文档 中 的 库 项 目 内 容 ， 可 以 将 库 项 目 从 源 文件 中 分 离 。 事 实 上， 此 时 页 面 中 的 内 容 已 
不 能 称 之 为 库 项 目 内 容 了 。 

在 使 用 了 库 项 目的 文件 中 ， 选 中 插入 的 库 项 目 ， 然 后 在 属性 面板 上 单 击 “从 源 文 件 分 
离 ” 命 令 ， 此 时 Dreamweaver 会 弹出 一 个 对 话 框 ， 提 示 用 户 把 库 项 目 变 为 可 编辑 状态 之 后 ， 
当 库 项 目 被 改变 时 ， 访 文档 中 相关 的 内 容 不 会 目 动 更 新 。 

如 末 单 击 “ 确 定 ” 按 钮 ， 则 确认 操作 ， 将 当前 选择 的 内 容 从 库 项 目 中 分 离 出 来 ， 如 果 
选择 “取消 ”按钮 ， 则 取消 操作 。 


1! 提示: 


12. 6.6 实例 制作 之 版 权 声 明 


网 站 的 厂 权 声明 也 是 一 个 重复 使 用 的 元 素 。 本 例 厂 权 声 明 的 制作 步骤 如 下 : 

01 打开 模板 index.dwt， 将 光标 定位 在 布局 表格 最 后 一 行 ， 然 后 打开 “布局 ”插入 
页 面 ， 单 击 “ 在 下 面 插入 行 ”按钮 怪 插 入 一 行 。 选 中 插入 行 的 两 列 单元 格 ， 单 击 属 性 面板 
上 的 “合并 单元 格 ” 按 钮 合并 为 一 行 ， 并 设置 单元 格 内 容 水 平 居 中 对 齐 ， 王 直 顶 端 对 章 

02 单 击 “ 名 用 ”面板 上 的 图 像 图 标 按 钮 ， 在 弹出 的 “选择 文件 ”对 话 杠 中 选择 一 
条 分 割 线 。 

03 将 光标 置 于 插入 的 分 隔 线 右 侧 ， 按 下 Shift + Enter 组 合 键 插入 一 个 软 回 车 ， 然 后 
输入 需要 的 版 权 声 明文 本 。 

04 选中 其 中 的 邮箱 地 址 , 在 属性 面板 的 “链接 ”文本 框 中 输入 mailto:vivi@123.com,， 
此 时 的 页 面 效 果 如 图 12-30 所 示 。 

05 选中 插入 的 版 权 内 容 ， 执 行 “修改 ”/“ 库 ”/“ 增 加 对 和 象 到 库 ” 末 日 命 令 。 

06 有 在 “ 库 ” 管 理 和 面板 的 ee 名 为 copyright lbi。 

RN 才 a 


mu 


5 六 于 Sr Viw 2012 
Email: wn 123.com 


图 12-30 页面 效果 
07 单 击 “ 库 ” 管 理 面 板 底部 的 “刷新 站 点 列表 ”图 标 按钮 总 ， 刷 新 库 项 目 列 表 。 
08 执行 “文件 ”/“ 人 保存” 这 单 俞 令 ， 弹 出 “更 新 页 面 ” 对 话 框 。 在 “更 新 ”区 域 


选择 “ 库 项 目 ”， 其 他 选项 保留 默认 设置 ， 然 后 单 击 “开始 ”按钮 更 新 页 面 。 
09 更 新 完毕 ， 在 实时 视图 中 预览 页 面 。 此 时 的 主页 效果 如 图 12-31 所 示 。 
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在 将 库 项 目 拖 到 “文档 ”窗口 的 同时 ， 按 下 Ctrl 键 ， 也 可 以 将 库 项 目 从 源 | 


P| 


蕊 ZI 溉 


末 妆 河 如 | 尘 


reoRREE96 中 文 履 入 站 与 提高 实 创 夫 和 


刚刚 届 雹 可 迪 起 
花 珊 随 团 局 蔓 地 


图 12-31 页 面 效果 
12.7 模板 与 库 的 应 用 


前 面 已 详细 介绍 了 模板 和 库 的 相关 操作 。 下 和 面 通 过 一 个 实例 以 加 深 读 者 对 本 革 内 容 的 


理解 。 本 例 首先 制作 了 一 个 模板 ， 然 后 基于 该 模板 生成 其 他 页 和 面 布局 相似 的 网 页 。 再 制作 
一 个 版 权 声 明 的 库 项 目 ， 并 添加 到 模板 中 ， 目 动 更 独 页 面 后 ， 所 有 的 页 面 中 都 将 显示 版 权 
信息 。 
本 例 的 制作 步骤 如 下 : 

01) 月 动 Dreamweaver CS6， 新 建 一 个 HTML 模 板 文件 。 在 “页 面 属性 ”对 话 框 中 设 
置 “ 链 接 文字 ”的 颜色 为 黑色 ， 且 “始终 无 下 划 线 ”。 

02 制作 第 一 张 页 面 ， 内 容 如 图 12-32 所 示 。 为 了 便于 控制 对 齐 格式 ， 正 文 的 内 容 部 
分 放 在 一 个 两 行 两 列 的 表格 内 。 

03 有 选中 页 面 中 的 正文 部 分 ， 单 击 “ 插 入 ” 栏 “ 常 用 ”面板 上 回 * 图 标 中 的 下 拉 箭 
头 ， 在 弹出 菜单 中 单 击 回 按 钮 。Dreamweaver 将 弹出 一 个 提示 对 话 框 ， 提 示 用 户 将 自动 把 
文档 转 为 模板 文件 。 

04 9 单 击 “ 确 定 ” 按 钮 ， 弹 出 “新 建 可 编辑 区 域 ” 对 话 框 。 在 “名 称 ” 采 用 默认 值 ， 
再 单 击 “人 确定 ”按钮 ， 插 入 可 编辑 区 域 。 

05 光标 定位 在 最 后 一 个 导航 图 片 所 在 的 单元 格 中 , 打开 “布局 ”插入 面板 , 单 击 “ 在 
下 面 插入 行 ”按钮 插入 一 行 。 选 中 插入 的 行 ， 合 并 单元 格 ， 并 在 属性 面板 上 设置 单元 格 背 
景 颜色 为 白色 ， 单 元 格 内 容 水 平 居中 对 齐 ， 竺 直 顶 端 对齐 ， 然 后 再 插入 一 个 可 编辑 区 域 ， 
用 于 插入 版 权 信息 。 全 此 文档 共有 两 个 可 编辑 区 域 ， 如 网 12-33 所 示 。 

06 执行 “文件 汪 /“ 保 存 ” 沫 单 命 令 ， 将 文件 保存 为 模板 文件 blog.dwt。 
240 


行 兰 党 水 


| 假如 信 生 不 曾 相 这 相同 二 二 下 二 本 十， 
| 个 如 上 和 华 下 曾 相 二 ， 拱 还 量 四 让 投 。 惕 宗 此 前 野 ， 可 有 局 。 和 天 始 
和 上 禁 后 ， 开 妈 已 雷 一 是 的 虱 坛 ， 德 没 医 这 这 申 的 三 而 里 。 

我 再 言 了 盟 ， 芝 十 必 时 硅 硼 过 笠 的 一 个 你 。 只 有 上代 古 让 大国 枉 ， 
我 再 间 了 表 ， 这 十 仙界 还 痛 这 怪 的 一 个 你 ， 凡 霄 你 能 直 具 回 杯 ， 时 滞 让 挤 证 本， 
也 只有 休 容 让 投 记 人生 下 得 机 衣 ， 得 平 闹 由 悄 。 育 一 币 上 可 有 天 可 看 赶 民 ， + 


,本 
从 和 下 合用 信 ， “各 和 再 一 和 凡人 这 讽 党 骨 刘 避 ， 研 移 邓 能 性 通 ， 寺 何 弄 华 示 系 1 各 员 操 
, \ 了 刘 于 站 全 到 什 之 人 囊 和 什 和 双开 ， 这 时 局， 下 下 区 

训 | 通才 昔 炉 寺 小 ”入 du 生 国 二 从 岂 厌 等” 天， 站 法 仙 本 全 四 丰 。 
噶 刘 ， 基 全 人 信和 和 9 ee a 
9 办 仅 一 切 只 能 络 草 名 | 习 坦 ， 收 备 训 的 牙 


上 天 。 收 菇 剑 的 感情 。 收 介 你 一 切 。 

| 条 归 大 生 干 曾 相 通 ， 上 的 人 由 和 人 有 并 莫名 的 不 
助 ， 激 昨 着 持 往 加 虹 的 必 | 沈 棒 亩 天 训 上 

和 和 不 和 性 ， 折 不 安信- Lg 即 营 这 站 光大 人 半生 个人 的 证 名 是 革 科 精心。 a 
A = | 襄 以 积 吉 占 盆 写 无 助 ， 染 . 尖 阳 的 国 陈 ， | 

| 可 如 信和 不 各 相 吉 : 技 下 合 导 机 一 个 大 的 三 灿 量 时 畔 己 心 ， 但 孝 | 区 本 部 ， 的 贸 沉 。 司 为 诈 也 在 瞪 ， 和 摆件 

可 以 笠 放 自我 的 入 委 与 无 助 。 寺 相 的 流 音 无耻 的 图 几 ， 因 为 遇 可 作 ， 才 缚 村 二 和 人 

ET 才 辣 有 更 深 的 意 忒 。 可 为 什么 在 易 的 时 幅 。 总 促 荐 该 波 


的 心 所 
全 人生 下 站 我 怎么 能 知 症 票 情 存在 的 直 正 侣 必 。 必 沉 有 
媒 才 阅 茶 到 ， 境 异 字 大 所 秘方 前 辐 妾 。 平 能 策 阵 同 进 。 也 环卫 与 


| 古人 于 不 名 相通。 误 虽 艺 甬 各 通 骂 博 户 守 的 识 正 至 六 。 具 征 有 
2 + 怠 基 几 ， 厂 恒定 正太 丑 方 合同 化。 不 阴 和 证 同 述 。 忆 下 驰 与 


同 李 ， 
机 的 大 业 不 和 相 肖 ， 酸 还 是 笠 。 全 隐 尾 本 理 ， 凤 旱情 这 了 太 生 最 
搞 丽 的 音 昌 ， 


sm wen eR | | 
图 12-32 页面 效 末 图 12-33 文档 中 的 两 个 可 编辑 区 域 


07 是 打开 “ 库 ” 面 板 ， 单 击 “ 库 ”面板 底部 的 新 建 库 项 目 按钮 车 ， 建 立 一 个 名 为 
copyright.lbi 的 库 项 目 。 
08 9 在 库 项 目 列表 中 双击 库 项 目 copyright.lbi， 打 开 该 库 项 目 文件 。 
109 用 单 击 “ 插 入 ” 栏 HTML 面板 上 按钮 过， 插入 一 条 水 平 线 。 
410 在 文件 copyright.lbi 中 插入 一 张 三 行 一 列 的 表格 ， 并 设置 表格 为 居中 对 齐 ，“ 边 
框 ” 属 性 设置 为 0。 在 表格 里 输入 “版 权 ” 等 文学 之 后 保存 文件 。copyright.lbi 最 终 制 作 结 
果 如 图 12-34 所 示 。 


EEE 


ww 


图 12-34 ” copyright.lbi 文 件 效 果 


11 纺 打开 “模板 ”管理 面板 ， 在 模板 列表 中 右 击 模板 blog.dwt， 在 弹出 的 上 下 文 荣 单 
中 执行 “从 模板 新 建 ”命令 ， 新 建 基于 模板 的 文档 。 可 以 友 现 在 文档 中 只 有 正文 部 分 和 底 
部 的 可 编辑 区 是 可 编辑 的 。 
.12 把 EditRegion2 可 编辑 区 内 的 文学 “EditRegion2” 删 控 。 然 后 打开 “ 库 ” 管 理 面 
板 ， 把 库 项 目 copyright.lbi 拖 到 EditRegion2 可 编辑 区 内 。 此 时 的 页 面 效 果 如 图 12-35 所 示 。 
13 执行 “文件 ”/“ 保 存 ” 命 令 保存 文件 ， 完 成 第 一 张 网 页 的 制作 。 
UL14 骨 打开 模板 管理 面板 ， 右 击 blog.dwt 模 板 ， 在 弹出 的 上 下 文 菜单 中 执行 “从 模板 新 
建 ” 命 令 ， 创 建 第 二 个 基于 模板 的 文档 。 
15 修改 正文 的 内 容 ， 如 图 12-36 所 示 。 
16 把 EditResgion2 可 编辑 区 内 的 文字 “EditResgion2” 删 挤 。 然 后 打开 “ 库 ” 管 理 面 
板 ， 把 copyright 库 项 目 拖 到 EditRegion2 可 编辑 区 内 。 
17 按 同 样 的 方法 制作 其 他 网 页 
18 打开 “模板 ”管理 面板 ， 双击 blog dwt 模 板 打 开 文 件 。 修 改 模 板 页 面 左 侧 的 链接 ， 
使 之 链接 到 到 上 面 制作 的 相应 文件 ,然后 新 建 CSS 规 则 定义 导航 图 请 的 边框 为 0,， 这 样 在 浏 
览 露 中 预览 页 面 时 ， 不 会 显示 导航 图 片 的 边框 。 


247 
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莹 加 河 加 | 党 


新 ”按钮 ， 更 新 使 用 模板 的 文件 。 然后 单 击 “ 关 闭 ” 按 钮 完成 网 页 制作 。 


假如 入 生 不 曾 粗 迪 


假如 入 生 丰 兽人 号 ， 找 运 是 部 个 找 ， 价 穿 依 售 梦 ， 党 后 ， 开 好 
巨 奥 一 合 的 刘 济 没 在 这 鸣 痒 购 演 市 早 - 
我 不 宫 了 牌 ， 这 个 世界 还 有 这 翌 内 一 个 你 ， 只 有 你 能 丰 人 加 珠 ， 
信 只 有 你 会 让 找 心 征 。 

霞 知 人 生 不 曾 相 巡 ， 我 不 会 由 入 ， 有 一 种 人 梧 以 百 看 不 友 ， 

i 。 和 相生。 为 全 和 x 


侈 季 ， 无 妾 的 困 协 ， 因 为 过 宇 浅 避 的 文艺 青年 
， 可 为 什么 在 爱 的 时 你 ， 总 半 秆 导读 

各 如 人 生 不 人 我 乞 志 个 知 秆 爱情 存在 的 真正 覃 义 。 让 及 有 
并 前 共 牧 。 牙 情 今 天 所 壳 万 种 同 少 ， 不 能 笠 你 同 冲 。 亿 不 能 马 


信 同 柳 。 
| 夫妇 人 灶 不 过 相通 ， 我 还 是 我 ， 你 你 钞 是 你 ， 只 是 民 让 了 人 业 最 
的 丽 的 弄 退 . 


Wiebtmstr ZJ12-2012 
由 二 和 na :~ | 


各 了 U2 


, NE SE 和 


图 12-35 ”在 网 页 插入 库 项 目 图 12-36 第 二 张 网 页 效果 


UL20) 保存 文档 。 按 F12 键 在 刘 览 器 中 预览 页 1 面 效果 ， 如 图 12-37 和 12-38 所 示 。 
”行将 流 水 


起 如 人 生 不 曾 相 滑 新歌 TOPt 
机 交点 半生 居间 通 。 政 迁 量 于 十 上， 国平 面 草 情 ， 基 克 ， 王 峙 
日 卓 一 癌 上 的 十 举 ， 睹 过 二 或 时 村 的 试 击 硬 。 

二 这 十 台 刘 区 有 这 1 ,十 罕 。 只 有 目 厂 让 上 可 十 。 


| 程 如 具 站 网 平 立 任 划 。 和 司 忆 画面 幸 狼 ， 否 一 
虱 大 一 六 总 就 训 主 务 台 。 咀 本 和 凡 林带 ， 坟 上衣 尝 恒 基 1 册 台 后 
丫 生 可 过 ， 生 时 于 曾 ， 蓝 雷 心 走 。 
量 间 外 寺 王 本 二 国王 是 旦 过 音 章 撞 一 十 瑟 方 隐 上 ， 近 下 这 光 机 
哥 型 。 志 省 民 区 下 一 二 。 访 寺 的 革 民 部 页 、 要 斋 的 癌 便 全 兄 ， 虐 
化 取 轴 入 司 深 ， 下 出 府 各 各 时 页 。 第 基 一 前 月 居 党 于 本 中 乓 。 


| 天 站 人 和 下 本 格局; 村 不 天 三 站 已 和 各 本 一 二 区 于 收 对 学 附 开 


加 识 人 妆 下 攻 相 本 配 二 二 全 全 本 中 请 序 丰 的 
PT 趾 姑 专权 所 时 注 训 国字 。 Sp i 


ee i i eb | 
区 全 的 当地 ， 


加 区 国友 Cpaigha - ad 
礁 运 挟 放 守恒 于 让 63 el 由 再 和 
Ra om 


图 12-37 首页 效果 图 12-38 第 二 张 网 页 效果 
单 击 左 侧 的 导航 栏 图 片 “Music”， 即 可 切换 到 如 图 12-38 所 示 的 第 二 张 网 页 。 


页 面 中 的 每 一 放歌 的 名 称 均 为 超级 链接 ， 单 击 其 中 一 首 ， 即 可 打开 相应 的 页 和 面 开始 播 


放 。 
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3) Dreamwearer 0096 中 广 上 及 入 门 己 可 高 实例 赤 碍 
A 


动态 网 页 发 布 拉 术 的 出 现 使 得 网 站 从 展示 平台 变 成 了 网 络 交 互 平台 。 基于 数据 库 技术 
的 动态 网 站 ， 不 但 可 以 大 大 降低 网 站 更 新 和 维护 的 工作 量 ， 还 可 以 实现 网 站 和 访问 者 的 互 
动 。 

本 书 第 一 和 章 已 介绍 过 表态 网 页 和 动态 网 页 的 区 别 。 动 态 网 页 URL 的 后 绥 不 
是 .htm、.html、shtml、.xml 等 廊 态 网 页 的 常见 形式 ， 而 是 以 .asp、.jsp、.aspXx、.php、.perl 
等 形式 为 后 级 ， 并 且 在 动态 网 页 网 址 中 有 一 个 标志 性 的 符号 “? ”。 

动态 网 页 其 实 驶 是 建立 在 B/S 〈 浏 览 右 /服务 器) 以 构 上 的 服务 右 冰 脚本 程序 ， 当 客户 
站 用 户 问 Web 服务 右 发 出 访问 该 脚本 程序 的 请 求 时 ，Web 服 务 右 将 根据 用 户 所 访问 页 面 的 
后 级 名 确定 该 页 面 所 使 用 的 网 络 编程 技术 ， 然 后 把 该 页 面 提交 给 相应 的 解释 引擎 。 解 释 引 
掌 扫 描 整 个 页 面 找 到 特定 的 定 界 符 ， 并 执行 位 于 定 界 符 内 的 脚本 代码 以 实现 不 同 的 功能 ， 
然后 把 执行 结果 (一 个 静态 网 页 ) 返回 Web 服 务 器 。 最 终 服务 器 把 执行 结果 连同 页 面 上 的 
HTML 内 容 以 及 各 种 客户 问 脚 本 一 同 传送 到 客户 端 。 因此, 动态 网 页 能 够 根据 不 同 的 时 间 、 
不 同 的 来 访 者 而 显示 不 同 的 内 容 ， 还 可 以 根据 用 户 的 即时 操作 和 即时 请 求 使 动态 网 页 的 内 
容 发 生 相应 的 变化 ， 如 常见 的 BBS、 留 言 板 、 聊 天 室 等 就 是 利用 动态 网 页 来 实现 的 。 在 浏 
览 右 站 显示 的 网 页 是 服务 亏 站 程序 运行 的 结 

动态 网 站 具有 以 下 显著 优点 : 可 显 若 提 高 网 站 维护 的 效率 ;网 站 的 内 容 保存 在 数据 库 
中 ， 便 于 搜索 、 奉 询 、 分 关 和 统计 ;可 以 实现 网 站 与 访问 者 的 互动 。 

Dreamweaver 提 供 了 众多 的 可 视 化 设计 工具 、 精 简 而 高 效 的 应 用 开发 环境 以 及 代码 编 
辑 文 持 。 使 用 Dreamweaver CS6 可 视 化 的 方式 来 编辑 动态 网 上 页， 就 像 编 辑 普通 网 页 一 样 简 
单 ， 几 乎 不 用 编写 任何 程序 代码 承 能 开发 出 功能 强大 的 网 络 应 用 程序 。 


13.2 安装 IIS 服 务 器 


在 创建 动态 网 页 之 有 前 ， 首 先 要 安装 和 设置 Web 服 务 堪 ， 并 创建 数据 库 。 

日 前 网 站 的 服务 器 一 般 安 装 在 WindowsNT、Windows2000Server 或 WindowsXP 操 作 系 
统 中 。 如 果 要 运行 动态 网 站 ， 如 ASP 网 站 ， 还 必须 安装 Web 服 务 器 。 推 荐 初学 者 使 用 IIS 
(Internet Information Server， 因 特 网 信息 服务 系统 ) ， 设 服务 器 能 与 Windows 系 列 操作 系 
统 无 颖 结合， 且 操 作 人 简单 。 

下 和 面 束 以 Windows XP 为 例 ， 讲 解 HS 组 件 的 安装 步 台 ， 其 他 操作 系统 下 的 操作 方式 与 
此 类 似 。 

(1) 在 Windows XP 操 作 系统 中 选择 “开始 ”/“ 控 制 面 板 ”/“ 滩 加 /删除 程序 ”图 标 ， 
打开 “ 添 加 /删除 程序 ”对 话 框 。 

(2) 单 击 对 话 框 左 侧 的 “添加 /删除 Windows 组 件 2 选项 , 弹出 图 13-1 所 示 的 “Windows 
组 件 癌 导 ” 对 话 框 。 在 该 对 话 框 中 选择 要 添加 的 组 件 Internet 信 息 服 务 〈IIS) 。 

(3) 双击 “Windows 组 件 问 导 ” 对 话 框 组 件 列表 中 的 “Internet 信 息 服 务 〈IIS) ” 选 
项 ， 弹 出 图 13-2 所 示 的 对 话 框 。 
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本 indows 组 件 癌 导 
Internet 信息 服务 【IIS) 
Yindors 钴 件 | 
可 以 添加 或 删除 Yindows XP 的 组 件 。 [ 要 添加 或 册 除 某 个 组 件 ， 博 单 击 旁 过 的 香 选 窒 。 光 色 框 表示 只 会 安装 该 组 件 的 一 
、 部 分 。 要 查看 组 件 内 容 ， 圭 单 击 “ 详 细 信 息 ”。 
Internet 信息 服务 并 IS) 的 子 组 件 (C): 
EInternet 信息 服务 管理 单元 


要 添加 或 遇险 基 个 姐 件 ， 请 单 击 这 过 的 复 选 惜 。 东 色 框 表示 只 会 安装 该 组 件 的 
一 部 分 。 要 查 闭 组 件 内 雁 ， 请 单 者 “详细 信息 2 网 SNTP Service 


Vv 
v 
A 


Internet 信息 服务 (IIS) 
MM [过 
BD Windows Nedia Player 


ft Nanagement Console 


描述 : 从 [开始] 菜单 和 桌面 添加 或 删除 对 Internet Explorer 
所 需 磁 盘 空 间 : 0.6 NB 
可 用 磁盘 空间 : 13150.3 IEB 所 需 磁 盘 空间 086 MB 


可 用 和 磁盘 空间 : 13149.9 IIB 
< 上 一 步 @)j 正 一步 oD | i | 


图 13-1 选中 IIS 组 件 图 13-2 IIS 子 组 件 的 选择 画面 

笔者 建议 初学 者 将 这 些 可 选 的 服务 全 部 选 上 。 

(4) 选择 需要 使 用 的 组 件 之 后 ， 选 择 “ 人 确定” 按钮 ， 并 将 对 应 的 操作 系统 安装 副 放 入 
光驱 内 。 此 时 将 弹出 一 个 复制 文件 的 窗口 。 

(5) 文件 复制 完成 之 后 ， 单 击 “ 完 成 ”按钮 ， 完 成 IS 服 务 安 装 。 

此 时 ， 在 安装 操作 系统 的 磁盘 目录 下 可 以 看 到 一 个 名 为 Inetpub 的 文件 来。 

下 和 面 测试 一 下 Web 服务 器 。 使 用 任何 熟悉 的 文本 编辑 器 (比如 Windows 目 市 的 记事 
本 程序 )， 编 写 如 下 代码 : 


<% 
Response.write ("欢迎 来 到 ASP 世界 ") 
> 


将 文件 保存 到 \Inetpub\wwwroot 目录 下 ， 命 名 为 test.asp。 打 开 浏 览 费 ， 在 地 址 栏 中 输 
入 http://localhost/test.asp， 如 末 得 到 相应 的 显示 页 面 ， 则 说 明 IIS 安装 成 功 。 


13.3 ”配置 IS 服 务 器 


完成 了 HS 的 安 关 之 后 , 束 可 以 利用 HS 在 本 机 上 创建 Web 站 点 了 , 但 在 此 之 前 还 必须 进 
行 相应 的 设置 。 下 面 介绍 配置 IIS 服 务 器 的 一 般 步 又 。 

(1) 打开 “控制 面板 ”/“ 性 能 和 维护 ”中 的 “管理 工具 ”页 面 ， 双 击 页 面 右 侧 列 表 
中 的 “Internet 服 务 管 理 右 ”图 标 ， 即 可 打开 “Internet 信 息 服 务 ” 窗 口 。 在 窗口 中 可 以 
看 到 ， 使 用 IIS 可 以 管理 网 站 、 默 认 SMTP 虚 拟 服务 器 等 。 

(2) 在 左 侧 窗 格 中 单 击 “ 默 认 网 站 ”节点 ， 则 右 侧 的 窗 格 中 将 显示 默认 的 Web 主 目录 
下 的 目录 以 及 文件 信息 ， 如 网 13-3 所 示 。 

主 目 录 是 指 服务 器 上 映射 到 站 点 域名 的 文件 来。 如 果 要 用 来 处 理 动 态 页 的 文件 夹 不 是 
主 目 录 或 其 任何 子 目 录 ， 则 必须 创建 虚拟 目录 。 有 关 虚 拟 目 录 的 介绍 将 在 本 章 下 一 市 中 介 


绍 。 


(3) 在 “默认 网 站 ” 结 点 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 六 单 中 选择 “属性 ”命令 ， 
打开 “默认 网 站 属性 ”对 话 框 ， 如 图 13-4 所 示 。 
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过 Internet 信息 服务 

立 件 下) ”操作 必 ) 查看 WW) 帮助 0) 

4 > [外国 | 本 回归 | 国 男 | 理 | 》 

| Internet 信息 服务 人 | 1 

日 易 下 99 (本 地 证 | e ci Nwindows\help\iishelp 
网 站 rri C: WINDOWS‘\web\printers 

C:\Inetpub\wwwroot\blog 


i lp 
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图 13-3 默认 网 站 节点 下 的 目录 及 文件 信息 


在 该 页 面 中 可 以 设置 站 点 的 IP 地 址 和 TCP 端 口 。 一 般 来 说 ， 初 学 者 不 需要 对 此 页 面 的 
内 容 进 行 修改 。 

(4) 单 击 “ 主 目录 ”页 签 ， 切 换 到 几 13-5 所 示 的 “ 主 目 录 ” 选 项 卡 。 该 页 面 用 于 设 
置 Web 站 点 的 主 目录 ， 即 站 点 文件 的 位 置 ， Rs 


「 丙 让 “|ISAET 第 选 器 | 主 目录 | 文档 “| 目录 安全 性 | TTP 头 | 自 定 义 错误 | 网 站 “| TShFI 第 选 器 | 主 目录 | 文档 “| 目录 安全 性 | JITP 头 | 自 定义 错误 
连接 到 | 资源 时 的 内 容 来 源 : 

描述 G) : 其 | | tet (8) 

IF 地 址 0): 全 部 未 分 配 ) v| 加重 定 和 下 URLOD 


TCF 端口 (T): 80 s 

Fo -一 本 地 路 径 (C)】: :Ninetpub\wwwroot | 训 览 和) . 
连接 四 脚本 资源 访 | 可 部) 记录 访问 0 
连接 超时 00): | 900| 秒 ET 


保持 HTTF 连接 (kK) 国 ] 目 录 浏览 全) 


应 用 程序 设置 
团 启用 日 志 记 录 ) Es , 
Es 应 用 程序 名 遇 ) : 葬 认 应 用 程序 | CR 


1Y3C 扩展 日 志文 件 格式 属性 加. 开始 位 置 : 供认 网 站 》 
[配置 (@)...，] 
执行 权限 EF): | 纯 脚本 v 


应 用 程序 保护 和: ”| 中 (民用) v| 


[LW 定 _j( 了 ji L 禹 


图 13-4 ”设置 默认 网 站 的 属性 图 13-5 ”设置 网 站 的 主 目 孙 


成 功 安 闭 IIS 之 后 ，Web 站 点 默认 的 主 目录 是 : 系统 安 朔 舟 符 :NinetpubNwwwroot， 也 
可 以 将 主 目 录 设 置 为 本 地 计算 机 上 的 其 他 目录 ， 还 可 以 设置 为 局 域 网 上 其 他 计算 机 的 目 
录 ， 或 者 重 定 向 到 其 他 网 址 ， 使 用 者 只 需 在 “连接 到 资源 时 的 内 容 来 源 ” 区 域 选中 需要 的 
内 容 来 源 ， 然 后 在 下 面 的 文本 框 中 键入 相应 的 路 径 即 可 。 本 书 使 用 默认 的 本 地 路 径 。 

此 外 还 可 以 在 “应 用 程序 设置 ”区 域 的 “执行 权限 ”下 拉 列 表 中 设置 应 用 程序 的 执行 
权限 。 其 中 ，“ 无 ”表示 Web 站 点 不 支持 ASP、JSP 等 脚本 文件 ，“ 纯 脚本 ”是 指 Web 站 点 可 
以 运行 ASP、JSP 等 脚本 ; “脚本 和 可 执行 程序 ” 则 是 指 Web 站 点 除了 可 以 运行 ASP、JSP 等 
脚本 文件 之 外 ， 还 可 以 运行 EXE 等 可 执行 文件 。 

(5) 单 击 “文档 ”页 签 切换 到 “文档 ”选项 卡 ， 修 改 浏 览 器 默认 的 主页 及 调用 顺序 。 

(6) 以 上 设置 完成 之 后 ， 单 击 “ 确 定 ” 按 钮 关闭 窗口 。 

配置 IIS 服 务 器 之 后 ， 接 下 来 还 需要 测试 HS 是否 能 正常 运行 。 最 简单 的 方法 就 是 直接 
使 用 浏览 右 输 入 http:/ 计 计算 机 的 他 地址， 或 输入 http:Nlocalhost， 然 后 按 Enter 键 。 如 果 可 以 
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看 到 ITS 的 缺 省 页 面 或 创建 的 网 站 的 主页 ， 则 代表 HS 运 和 有 正 彰 ”个 则 ， 应 检 碍 计算 机 的 卫 
地 址 是 否 设 置 正确 。 


13.4 设置 虚拟 目录 


尽管 在 如 图 13-8 所 示 的 窗口 中 可 以 随意 设置 网 站 的 主 目录 ， 但 除非 有 必要 ， 一 般 不 建 
议 直接 修改 默认 网 站 的 主 目录 。 如 果 不 希 望 把 网 站 文件 存放 到 cinetpub\wwwroot 目 录 下 ， 
或 动态 页 所 在 的 文件 夹 不 是 主 目录 或 其 任何 子 目录 ， 则 可 以 通过 创建 指 癌 站 点 文件 夹 的 虚 
拟 目 录 来 解决 。 
创建 HIS 的 虚拟 目录 有 两 种 方式 使 用 IIS 管 理 器 创建 ， 或 设置 文件 夹 的 共享 属性 。 


13. 4. 1 使 用 11S 管 理 器 创建 虚拟 目录 


使 用 Internet 信 息 服 务 管理 器 创建 虚拟 目录 的 具体 步骤 如 下 : 

(1) 在 图 13-3 所 示 的 “Internet 信 息 服务 ”窗口 左 侧 窗 格 中 的 “默认 网 站 ” 结 点 上 
单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 “新 建 ”/“ 虚 拟 目 录 ” 命 令 ， 打开“ 虚拟 目录 
创建 回 导 ”对 话 框 ， 如 图 13-6 所 示 。 

(2) 单 击 “ 下 一 步 ” 按 钮 ， 在 图 13-7 所 示 的 弹出 窗口 的 “别名 ”文本 框 中 输入 所 要 
建立 的 虚拟 目录 的 名 称 。 


庶 拟 目录 创建 向 号 


虚拟 目录 创建 向 导 


虚拟 目录 别名 
欢迎 使 用 虚拟 目录 创建 向 导 必须 当 虚 拍 目 录 提 供 一 个 简短 的 名 称 或 别名 ， 以 便于 快速 引用 


”dy py 小 上 no 
输入 用 于 获得 Web 庶 拟 目录 访问 权限 的 别名。 使 用 的 命名 规 
则 应 与 目录 命名 规则 相同 。 


后 f 中 一 个 虚 卸 四 
此 向 导 将 帮助 您 在 网 站 上 新 建 一 个 虚拟 目录 别名 (AY: 


单 击 “ 下 一 步 ” 控 钮 继续 - 


2 取消 


图 13-6 “虚拟 目录 创建 问 导 ”对 话 框 图 13-7 输入 虚拟 目录 的 别名 


与 注意 : 


心 二 虚拟 目录 的 别名 不 区 分 大 小 写 ， 并 且 应 唯一 。 


(3) 单 击 “下 一 步 ” 按 钮 ， 在 弹出 的 对 话 框 中 单 击 “ 浏 览 ”按钮 ， 选 择 要 建立 虚拟 
目录 的 文件 夹 ， 如 图 13-8 所 示 。 

(4) 单 击 “下 一 步 ” 按 钮 ， 在 图 13-9 所 示 的 对 话 框 中 设置 虚拟 目录 的 访问 权限 。 

访问 权限 用 于 指定 用 户 通 过 浏览 器 可 以 执行 的 操作 。 


读 取 : 这 是 最 基本 的 一 个 权限 ， 人 允许 用 户 访 问 文件 夹 中 的 普通 文件 ; 如 HTML 文件 、 
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GE 文件 等 。 

运行 脚本 : 所 谓 的 脚本 就 是 ITS 中 可 以 执行 的 文件 ， 如 ASP 脚本 程序 等 。 

对 于 只 存放 ASP 文 件 的 目录 来 说 ， 应 该 启用 “运行 脚本 ”权限 ， 对 于 既 有 ASP 文 件 ， 又 
有 普通 HTML 文 件 的 目录 ， 应 同时 启用 “ 读 取 ”和 “运行 脚本 ”权限 。 

执行 : 允许 访问 者 在 服务 器 端 运 行 CGI 或 ISAPI 程序 。 

执行 权限 通常 都 不 会 被 允许 ， 以 免 对 服务 器 端的 计算 机 造成 不 良 影响 。 

写 入 : 指定 用 户 是 否 可 以 通过 浏览 句 上 传 文件 至 服务 器 的 计算 机 中 。 

浏览 : 如 果 指 定 了 该 权限 ， 则 当 用 户 没 有 特别 设置 要 读 取 站 点 的 哪 一 个 文件 时 ， 便 列 
出 目录 中 的 所 有 子 目 录 及 文件 列表 供用 户 选 择 。 


虚拟 目录 创建 向 导 虚拟 目录 创建 向 导 


问 权 限 
设置 虚拟 目录 的 访问 要 限 。 
允许 下 列 权限 : 


二 i lv 读 职 (R) 

由 < 于 [CC:) ， ee 

< 本地 磁盘 0D:) lv 运行 脚本 负 0 ASP) (3) 

zp 本 地 磁盘 三 :) 厂 执行 向 0 ISAFI 应 用 程序 或 CGIT) (E) 
< 本 地 磁盘 (F:) 站 守信 0 

< 本 地 磁盘 (G:) le 

ScD e 动 器 Qt) sn 

回 ) 共享 文档 单 击 “ 下 一 步 ” 控 钮 完成 向 导 - 
由 [加 Administrator 的 廊 档 


此 | 对 地 志 对 对 | | 


定 2 
新 建文 件 夹 f) 取消 


图 13-8 ”选择 要 建立 虚拟 目录 的 文件 夹 图 13-9 ”设置 目录 访问 权限 


鉴于 站 点 安全 性 因素 的 考虑 ，“ 写 入 ”和 “浏览 ”两 项 最 好 不 要 选择 ， 除 非 有 特殊 原 
因 需 要 问 站 点 目录 写 入 内 容 或 得 看 目录 结构 。 建 议 初 学 者 采用 执 认 设置 即 可 。 

(5) 单 击 “ 下 一 步 ” 控 钮 ， 在 弹出 的 对 话 框 中 单 击 “完成 ”按钮 ， 即 可 完成 虚拟 目 
录 的 创建 。 

此 时 ， 在 “Internet 信 息 服务 ”窗口 左 侧 的 “上 默认 网 站 ” 结 点 下 可 以 看 到 新 创建 的 虚 
拟 目 录 。 


13.4.2 设置 文件 夹 的 共享 属性 


通过 设置 文件 夹 的 Web 共 吾 属性 , 也 可 以 将 选 定 的 文件 夹 设置 为 虚拟 目录 , 步骤 如 下 : 
(1) 在 资源 管理 器 中 ， 在 要 议 置 为 虚拟 目录 的 文件 夹 上 单 击 鼠标 右 健 ， 从 弹出 的 快 
捷 荣 单 中 选择 “属性 ”命令 ， 打 开 “Web 共 吾 ” 选 项 卡 ， 如 网 13-10 所 示 。 
(2) 选中 “共享 文件 夹 ” 单 选 按钮 ， 弹 出 图 13-11 所 示 的 “编辑 别名 ”对 话 框 。 在 议 
对 话 框 中 可 以 设置 该 文件 夹 的 别名 、 访 问 权 限 和 应 用 程序 权限 。 
(3) 设置 完毕 之 后 ， 单 击 “ 人 确定 ”按钮 天 财 对 话 框 。 此 时 打开 “Internet 信 息 服务 ” 
对 话 框 ， 可 以 在 “默认 网 站 ” 结 点 下 看 到 刚 创建 的 虚拟 目录 。 
主 目 录 和 虚拟 目录 都 是 1IS 服 务 器 的 服务 目录 , 这 些 目录 下 的 每 一 个 文件 都 对 应 看 一 个 
URL， 都 能 够 被 客户 访问 。 将 应 用 程序 放 在 虚拟 目录 下 有 两 种 方法 : 
1) 直接 将 网 站 的 根 目 录放 在 虚拟 目录 下 面 。 例 如 ， 应 用 程序 的 根 目 孙 是 “fashion”， 
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和 接 将 它 放 在 虚拟 目录 下 ， 路 径 为 “[ 便 盘 名 ]: \Inetpub\wwwroot\fashion”。 此 时 对 应 的 
URL 是 “http://localhost/fashion”。 


education 蛙 性 


常规 | 共享 | Web 共享 | 自 定义 


| Internet 信息 服务 


共享 位 置 00 : | 亚 现 司 林 v 
@ 不 共享 文件 夹 四 
〇 共享 文件 夹 G) 
别名 站) 


目录 种 ) : | 
别名 心 ) : [assation 


访问 权限 
读 职 (R) 口 肢 本 资源 访问 CC) 
口 写 入 久 ) 口 目录 浏览 局 ) 


应 用 程序 权限 
〇 无 名 
@) 脚本 (5) 
人 〇 执行 (包括 脚本 ) 区 ) 


图 13-10 “Web 共享 ”选项 卡 图 13-11 “编辑 别名 ”对 话 框 


2) 将 应 用 程序 目录 放 到 一 个 物理 目录 下 例如，D:\fashion〉， 同 时 用 一 个 虚拟 目录 
指 问 该 物理 目录 ， 此 时 用 户 可 通过 虚拟 目录 的 URL 来 访问 它 ， 而 不 需要 知道 对 应 的 物理 目 
录 。 一 旦 应 用 程序 的 物理 目录 改变 ， 只 需 更 改 虚 拟 目 录 与 物理 目录 之 间 的 映射 ， 就 仍然 可 
以 用 原来 的 虚拟 目录 来 访问 它们 。 

当 用 户 在 浏览 器 地 址 栏 中 输入 一 个 URL 时 ， 例 如 http://localhost/asp/test.asp， 本 地 主机 
上 的 HS 服务 磺 首 先 租 找 是 售 存 在 别名 为 asp 的 虚拟 目 孙 ， 如 末 有 ， 就 显示 asp 虐 拟 目 录 对 应 
的 实际 路 径 下 的 testasp 文 件 ; 如 果 没 有 ， 则 查找 主 目录 下 的 asp 文 件 夹 下 的 test.asp 文 件 ， 如 
果 找 不 到 该 文件 ， 则 返回 出 错 信息 。 

初学 者 需要 注意 的 是 ， 通 过 URL 访 问 虚 拟 目 录 中 的 网 页 时 应 该 使 用 别名 ， 而 不 是 目录 
名 。 例 如 ， 假设 别名 为 blog 的 虚拟 目录 对 应 的 实际 路 径 为 Emywork DWCS6\blog， 要 访问 
其 中 名 为 Index.asp 的 网 页 时 ， 应 该 在 浏览 右 地 址 栏 中 输入 http://localhost/blog/index.asp 访 
问 ， 而 不 是 使 用 http://localhost/mywork/DWCS6/blog /index.asp 访 问 。 男 外 动态 网 页 文件 不 
能 通过 双击 来 查看 ， 必 须 使 用 浏览 右 访 问 。 


13.5 制作 动态 网 页 的 步骤 


在 Dreamweaver 中 ,利用 可 视 化 工具 可 以 便捷 地 开发 动态 web 站 点 ， 而 不 必 杀 手 编写 能 

够 显示 数据 库 中 存储 的 动态 内 容 所 必需 的 复 林 编程 逻辑 。Dreamweaver 可 以 使 用 几 种 流行 

的 Web 编 程 语 言 和 服务 器 技术 中 的 任意 一 种 来 创建 动态 Web 站 点 。 这 些 语言 和 技术 包括 

ColdFusion、ASP 和 PHP 等 。 

创建 一 个 动态 页 面 可 分 为 创建 静态 页 面 , 创建 动态 数据 源 , 在 静态 页 中 添加 动态 内 容 ， 
添加 服务 需 和 行为、 测试 和 调试 Web 页 $ 个 步骤 。 

(1) 新 建 一 个 动态 页 面 , 并 使 用 Dreamweaver 提 供 的 设计 工具 创建 页 面 的 框架 和 布局 。 

255 


kod uss 


证 上 洪 河 习 蚊 渤 


19 Dreamweawer096 中 六 上 脾 入 门 与 接 高 实例 赤 焉 


(2) 创建 数据 库 和 数据 表 ， 并 定义 提取 数据 的 记录 集 。 

如 果 需 要 使 用 数据 库 ， 束 必须 定义 记录 和 集 ， 以 便 从 数据 库 中 提取 数据 。 所 谓 记 录 集 ， 
是 从 一 个 或 多 个 表 中 提取 的 数据 子 集 ， 一 个 记录 集 也 是 一 张 表 ， 这 是 因为 它 也 具有 相同 的 
字段 的 记录 集合 。 当 得 询 数 据 库 时 可 创建 一 个 记录 集 。 

(3) 为 页 面 对 象 绑 定 数据 ， 以 创建 动态 内 容 。 所 谓 绑 定数 据 ， 是 指使 用 Dreamweaver 
CS6 中 的 “ 绑 定 ”面板 ， 为 页 面 对 象 与 数据 库 中 存储 的 数据 建 记 关联 。 

(4) 添加 服务 右 行 为 。Dreamweaver 提 供 了 众多 预定 义 的 服务 器 行为 ， 网 页 设计 人 员 
可 以 使 用 预定 义 的 服务 器 行为 ， 也 可 以 使 用 目 己 建立 的 服务 器 行为 ， 还 可 以 使 用 其 他 人 员 
建 并 的 服务 器 行为 。 

(5) 编辑 和 调试 Web 页 。Dreamweaver 提 供 了 3 种 编辑 环境 : 可 视 化 编辑 环境 、 活 动 
数据 编辑 环境 ， 最 后 可 根据 需要 编辑 和 调试 Web 页 。 人 代码 编辑 环境 。 当 然 还 可 以 使 用 其 他 
的 调试 工具 进行 实时 的 跟 踩 调试 。 


13.6 连接 数据 库 


在 将 数据 库 中 的 数据 绑 定 到 ASP 应 用 程序 之 前 ， 必 须 建 立 一 个 数据 库 连 接 ， 人 否则 
Dreamweaver 无 法 使 用 数据 库 作 为 动态 页 面 的 数据 源 。 在 建立 数据 库 连 接 之 前 必须 建立 一 
个 DSN 指 同 数 据 库 的 快捷 方式 ， 它 包含 数据 库 连 接 的 一 切 信 息 。 

所 谓 建 并 数据库 连接 ， 束 是 建立 数据 库 连 接 文 件 ， 在 连接 文件 中 指明 数据 库 驱 动 程序 
和 数据 库 路 径 的 过 程 。 站 点 中 每 一 个 数据 库 都 对 应 一 个 独立 的 连接 文件 。 在 Dreamweaver 
中 创建 连接 文件 时 ， 系 统 会 将 所 有 的 连接 信息 上 自动 放置 在 站 点 根 目 录 下 有 目 动 生成 的 
Connections 文 件 夹 中 。 


13. 6. 1 连接 DSN 数 据 源 


存储 在 数据 库 中 的 数据 通常 有 专 有 的 格式 。Web 应 用 程序 在 试图 访问 这 种 格式 的 数 
据 时 无 法 解释 这 些 数据 ， 这 束 需 要 在 Web 应 用 程序 与 数据 库 之 间 存 在 一 个 软件 接口 ， 以 
允许 应 用 程序 和 数据 库 互 相 进行 通信 。 例 如 ，ColdFusion 和 JSP 应 用 程序 使 用 JDBC:; 
ASP 应 用 程序 使 用 ODBC。 

所 请 ODBC， 即 开放 数据 库 连 接 (Open DataBase Connection ) ， 在 不 同 的 数据 库 管 理 
系统 上 存 取 数 据 。 例 如 如 果 有 一 个 可 使 用 SQL 语句 存 取 数 据 库 中 记录 的 程序 ， 此 时 ODBC 
可 以 让 用 户 使 用 此 程序 直接 存 取 Microsoft Access 数 据 库 中 的 数据 。 

本 六 将 回 读 者 介绍 在 Dreamweaver 中 使 用 数据 源 名 称 (DSN) 连接 到 数据 库 的 方法 。 
考虑 到 大 多 数 读者 的 试验 环境 ， 即 Web 服 务 需 与 Dreamweaver 在 同一 全 计算 机 上 运行 ， 所 
以 本 和 介绍 在 本 地 配置 的 情况 下 ， 如 何 创建 到 Access 数 据 库 的 连接 ， 操 作 步 又 如 下 : 

(1) 创建 一 个 Microsoft Access 数 据 库 ， 并 将 其 存放 到 网 站 相应 的 目录 下 。 

(2) 打开 Dreamweaver, 狐 建 一 个 动态 网 页 , 或 打开 一 个 需要 连接 数据 库 的 动态 页 面 。 

(3) 选择 “窗口 二 /“ 数 据 库 ”人 命令， 打开“ 数据 库 ” 面 板 。 单 击 该 对 话 框 中 的 过 | 护 
钮 ， 从 弹出 的 下 拉 菜 单 选 择 “ 数 据 源 名 称 C(DSN) ”命令 ， 弹 出 “数据 源 名 称 (DSN) ” 


2350 


对 话 框 ， 如 图 13-12 所 示 。 


数据 源 名 称 (D5NH) 


连接 名 称 : | 
数据 源 名 称 ms :| 


用 户 名 : | 


密码 : | | 
Dreamweaver 应 连接 : 〇 使 用 测试 服务 器 上 的 DSH 
多 使 用 本 地 DSN 


图 13-12 “数据 源 名 称 (DSN)〉 ”对 话 框 


了 注意 


9 在 “数据库” 面板 中 可 以 看 到 有 4 个 步 台 ,只 有 前 3 个 步骤 完成 了 才能 进 
行 创建 连接 的 操作 . 


(4) 在 “连接 名 称 ” 文 本 框 中 输入 连接 的 名 称 ， 一 般 可 以 输入 “conn+ 数 据 库 名 称 ” 
作为 连接 的 名 称 。 连 接 名 称 中 不 能 使 用 任何 空格 或 特殊 字符 。 

(5) 在 “数据 源 名 称 DSN) ”下拉 列 表 框 中 选择 一 个 数据 源 名 称 。 如 果 还 没有 定 
义 ODBC 数 据 源 ， 则 单 击 “定义 ”按钮 ， 在 弹出 的 如 图 13-13 所 示 的 对 话 框 中 定义 数据 源 。 
步骤 如 下 : 

用 户 ee ee DSNH | 驱动 程序 | 跟踪 ”| 连接 池 | 关于 | 


系统 数据 源 (5): 
驱动 程序 


ase Driver (*. dbf) 
ase VFPF Driver lx. dbf) 
| 


= ”0DBC 系统 数据 源 存 姥 了 如 何 与 指 
统 数 据 源 对 当前 机 器 上 的 所 


图 13-13 “ODBC 数据 源 定理 费 ” 对 话 框 图 13-14 “创建 莉 数 据 源 ”对 话 框 


1) 切换 到 “系统 DSN” 页 面 ， 单 击 “ 添 加 ”按钮 ， 在 弹出 的 图 13-14 所 示 的 “创建 数 
据 源 ”对 话 框 中 选择 需要 的 数据 源 驱动 程序 。 本 例 选 择 “Microsoft Access Driver”。 

2) 单 击 “完成 ”按钮 ， 弹 出 图 13-15 所 示 的 对 话 框 。 

3) 在 “数据 源 名 ”文本 框 中 键入 数据 源 的 名 称 ， 在 “说 明 ” 文 本 框 中 键入 数据 源 的 
介绍 ， 然 后 单 击 “ 选 择 ” 按 钮 ， 在 弹出 的 “选择 数据 库 ” 对 话 框 中 选择 需要 的 数据 库 ， 单 
击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

4) 返回 到 “ODBC 数 据 源 管理 器 ”对 话 框 时 ， 读 者 可 以 发 现 新 创建 的 数据 源 名 称 。 

(6) 在 “数据 源 名 称 (CDSN) ”对 话 框 中 的 “用 户 名 ”和 “ 密 但 ”文本 框 中 分 别 输 
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入 用 户 名 及 密 但 。 
(7) 选中 “使 用 本 地 DSN” 单 选 按钮 。 
(8) 单 击 “ 测 试 ” 按 钮 测试 连接 是 否 成 功 。 连 接 成 功 后 ， 单 击 “ 确 定 ”按钮 ， 返 回 
到 “数据 库 ” 面 板 。 此 时 ， 在 “数据 库 ” 面 板 中 可 以 看 到 新 建立 的 连接 。 如 网 13-16 所 示 。 
单 击 对 象 前 面 的 打 和 登 图 标 田 ， 可 以 展开 各 项 奋 看 数据 库 的 各 个 对 象 。 
ODBC Hicrosoft Access 安装 本 | 


+ 一 hoP VBhScript 


选择 (s).. .| 创建 (C)..， | 修复 (8)... | 压缩 om. .| 高 级 人 | 


预 店 过 程 


Moo 


系统 数据 库 


全 无 字 ) 
个 数据 库 (T): 


把 OO | 选项 (0) >> | 


图 13-15” “ODBC Microsoft Access 安 装 ” 对 话 框 图 13-16 已 创建 的 数据 库 连 接 


通过 DSN 数 据 源 连接 SQL Server 数 据 库 与 连接 Access 数 据 库 相差 不 多 ， 有 兴趣 的 读者 
可 以 目 行 练习 。 


13.6.2 自 定 义 连接 字符 串 


除了 使 用 DSN 数 据 源 连接 数据 库 以 外 ， 还 可 以 使 用 目 定 义 连接 字符 串 ， 在 Web 应 用 
程序 和 数据 库 之 间 创 建 ODBC 连 接 。 与 DSN 数 据 源 不 同 ， 连 接 字 符 串 是 一 个 包含 了 很 多 参 
数 的 衬 符 串 ， 其 间 用 分 号 分 隔 ， 这 些 参数 包含 了 Web 应 用 程序 在 服务 右上 连接 到 数据 库 所 
需 的 全 部 信息 。 

对 于 Access 和 SQL Server 数 据 库 ， 连 接 字 人 符 串 具有 如 下 语法 格式 : 

ODBC: 

Driver={ Driver (*.mdb)}:DBQ=[DSN | 

OLE DB: 

Provider=[OLE DB 
Provider|]:Server=[ServerNamel]:;Database=[DatabaseName|]:;UID=[UserID]:PWD=[Password| 

其 中 涉及 的 参数 和 傈 要 说 明 如 下 : 

Provider: 该 参数 指定 数据 库 的 OLE DB 提供 程序 。 如 果 没 有 Provider 参 数 ， 则 将 使 用 
ODBC 的 默认 OLE DB 提供 程序 ， 而 且 ， 必 须 为 数据 库 指定 适当 的 ODBC 驱 动 程序 。 

下 面 分 别 是 Access、SQL Server 和 Oracle 数 据 库 的 常用 OLE DB 提供 程序 的 参数 : 
Provider=Microsott.Jet.OLEDB.4.0; Provider=SQLOLEDB; Provider=OraOLEDB. 

Driver: 该 参数 指定 在 没有 为 数据 库 指定 OLE DB 提供 程序 时 ， 所 使 用 的 ODBC 了 驱动 程 
六 

Server: 该 参数 指定 承载 SQL Server 数 据 库 的 服务 器 ， 这 种 情况 下 ， 指 Web 应 用 程 友和 
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数据 库 服务 左 ， 不 在 同一 侣 服务 左上 运 和 有。 

Database: 该 参数 为 SQL Server 数 据 库 的 名 称 。 

DBQ: 访 参 数 为 指 癌 基于 文件 的 数据 库 〈 如 在 Access 中 创建 的 数据 库 ) 的 路 径 ， 该 路 
径 是 在 承载 数据 库 文 件 的 服务 右上 的 路 径 。 

UID: 该 参 数 为 连接 数据 库 的 用 户 名 。 

PWD: 访 参 数 为 用 户 黎 码 。 

DSN: 该 参数 为 数据 源 名 称 。 这 种 情况 ， 指 已 经 在 服务 左上 定义 的 DSN 名 称 。 

对 于 其 他 类 型 的 数据 库 ， 连 接 字 符 串 可 能 不 使 用 上 面 列 出 的 参数 ， 或 者 可 能 对 于 这 些 
参数 ， 有 不 同 的 名 称 或 用 途 。 下 面 以 连接 Access 数 据 库 为 例 ， 讲 解 使 用 连接 字符 串 连 接 数 
据 库 的 一 般 步 又 。 

(1) 在 Dreamweaver 中 打开 一 个 ASP 页 面 ， 然 后 执行 “窗口 ”/“ 数 据 库 ”命令 ， 打 开 
“数据 库 ” 浮 动 面板 。 

(2) 单 击 该 面板 上 的 “添加 ”按钮 划 ， 在 弹出 的 下 拉 菜 单 中 选择 “ 自 定 义 连接 字符 
串 ” 人 命令， 弹出 多 13-17 所 示 的 “ 目 定 义 连 接 字 符 串 ”对话 框 。 


自 定义 连接 字符 串 


连接 名 称 : | 
连接 字符 审 : 


Dreamweaver 应 连接 : 〇 使 用 测试 服务 器 上 的 驱动 程序 
@ 使 用 此 计算 机 上 的 驱动 程序 


图 13-17 “ 目 定 义 连接 字符 串 ” 对 话 框 

(3) 在 “连接 名 称 “ 文 本 框 中 输入 新 连接 的 名 称 ， 例 如 conn2。 

(4) 在 “连接 字符 串 ” 文 本 框 中 输入 指向 数据 库 的 连接 字符 串 。 例 如 连接 ci\inetpub\ 
wwwiroot\blog\data 目 录 下 一 个 名 为 product,mdb 的 Access 库 ， 该 库 具 有 密码 admin， 则 应 输入 
如 下 的 字符 串 : 

Provider=Microsotft.Jet.OLEDB.4.0:;Data 
Source=c:\inetpub\wwwroot\blog\data\product.mdb;Persist Security Info=False; Jet 
OLEDB:Database Password=admin 

如 果 没 有 在 连接 字符 串 中 指定 OLE DB 提供 程序 〈 即 ， 没 有 包含 Provider 参数 ) ， 
ASP 将 目 动 使 用 用 于 ODBC 张 动 程序 的 OLE DB 提供 程序 。 这 种 情况 下， 必须 为 数据 
库 指定 适当 的 ODBC 张 动 程 序 。 实 现 同 样 功能 的 ODBC 方 式 连接 字符 串 如 下 : 

Driver={ Microsoft Access Driver (*.mdb)}:;DBQ= 
c:\inetpub\wwwroot\blog\data\product.mdb;PWD=admin 


= 提示 :、、 0 、. 
提 初学 者 一 定 要 注意 ，Driver 和 (#*.mdb) 之 间 有 个 空格 . 


如 果 用 户 的 站 点 由 ISP 有 承载， 且 不 知道 数据 库 的 完整 路 径 ， 则 要 在 连接 字符 串 中 使 

用 ASP 服务 需 对 象 的 MapPath 方法 。 
在 键入 连接 字符 串 时 ， 如 果 需 要 可 以 单 击 “ 高 级 ” 投 钮 ， 在 弹出 的 对 话 杠 中 输入 一 个 
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染 构 或 目录 名 称 ， 以 限制 Dreamweaver 在 设计 时 有 所 检索 的 数据 库 项 数 。 注 意 在 Microsoft 
Access 中 不 能 创建 架构 或 目录 。 

(5) 如 果 在 连接 字符 串 中 指定 的 数据 库 驱 动 程序 没 有 与 Dreamweaver 安装 在 同一 台 
计算 机 上 ， 则 选择 “使 用 测试 服务 器 上 的 驱动 程序 ”选项 。 本 例 选 中 “使 用 此 计算 机 上 
的 驱动 程序 ”。 

(6) 单 击 “测试 ”按钮 测试 数据 库 连 接 是 否 成 功 。 如 果 连 接 成 功 ， 单 击 “ 确 定 ” 鬼 
钮 ， 完 成 设置 ， 退 回 到 Dreamweaver 编 辑 界面 。 此 时 刚才 建立 的 连接 将 显示 在 “数据 库 ?” 
面板 中 。 在 “文件 ”面板 中 ， 可 以 看 到 Dreamweaver 上 自动 生成 了 一 个 名 为 Connections 的 文 
件 夹 ， 其 中 包含 了 一 个 以 连接 名 称 命名 的 asp 文 件 ， 这 就 是 保存 连接 字符 串 的 地 方 。 

表面 介绍 了 使 用 DSN 数 据 源 和 目 定 义 连接 字符 串 两 种 方式 为 Web 程 序 添加 数据 库 的 
文 持 。 相 对 来 讲 ，DSN 数 据 源 方式 要 简单 、 快 捷 一 些 , 而 目 定义 连接 字符 串 方式 虽然 灵活 ， 
但 较为 复杂 ， 而 且 容 易 出 错 。 读 者 可 以 根据 目 己 的 喜好 选择 合适 的 连接 方式 。 


13. 6.3 ”编辑 数据 库 连 接 


创建 数据 库 连 接 以 后 , 用 户 还 可 以 随时 修改 连接 信息 , 或 删除 不 再 需要 的 数据 库 连 接 。 

编辑 数据 库 连 接 的 具体 操作 方法 如 下 : 

(1) 选择 “窗口 ”/“ 数 据 库 ”命令 ， 打 开 “ 效 据 库 ”浮动 面板 。 

(2) 从 数据 库 连 接 列 表 中 选择 一 个 需要 编辑 的 连接 ， 然 后 双击 该 数据 库 连 接 的 名 称 ， 
打开 对 应 的 数据 连接 定义 对 话 框 。 

(3) 对 数据 库 进 行 必要 的 修改 后 早 击 “确定 ”按钮 。 

编辑 数据 库 连接 之 后 ， 必 须 及 时 更 独 页 面 中 的 内 容 。 步 又 如 下 : 

(1) 选择 “窗口 ”/“ 绑 定 ” 命 令 打 开 “ 绑 定 ” 和 面板 。 

(2) 双击 记录 和 集 名 ， 弹 出 “记录 集 ” 对 话 框 。 从 “连接 ”下 拉 列 表 框 中 选择 修改 后 
的 连接 ， 单 击 “ 人 确定 ”按钮 即 可 更 新 页 面 中 的 内 容 。 

如 果 要 删除 数据 库 连 接 ， 可 以 执行 以 下 操作 : 

(1) 在 “数据 库 ” 和 面板 中 ， 从 数据 库 连 接 列 表 中 选择 一 个 需要 删除 的 连接 ， 蛙 击 | 一 
按钮 ， 弹 出 询问 是 售 删除 连接 对 话 框 ， 单 击 “ 是 ”按钮 即 可 删除 该 连接 ， 如 果 单 击 “ 合 ” 
按钮 ， 则 取消 该 操作 ， 不 会 删除 该 数据 库 连 接 。 

数据 库 连接 被 删除 之 后 ， 也 应 及 时 为 每 一 个 使 用 该 连接 的 页 面 指定 一 个 新 的 连接 。 

(2) 选择 “窗口 ”/“ 绑 定 ” 命 令 打 开 “ 绑 定 ” 和 面板 。 

(3) 双击 记录 和 集 名 ， 弹 出 “记录 集 ” 对 话 框 。 从 “连接 ”下 拉 列 表 框 中 选择 需要 的 
连接 ， 单 击 “ 人 确定 ”按钮 即 可 重新 连接 数据 库 。 


13.7 定义 数据 源 


企 一 个 站 点 中 可 能 不 止 一 个 数据 库 。 一 个 数据 库 中 义 往 往 包 含 多 个 结构 不 同 的 数据 
表 。 因 此 ， 将 动态 舟 容 添加 到 页 面 中 之 前 ， 必 须 定 义 一 个 数据 源 来 提供 动态 内 容 。 

数据 源 可 以 是 记录 集中 的 一 个 域 ， 是 表单 的 提交 值 ， 或 是 类 似 会话 变 量 或 应 用 程序 变 
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量 的 服务 器 对 象 。 选 择 “ 窗 口 ”/“ 绑 定 二 靖 令 ， 在 弹出 的 “ 绑 定 ”面板 中 单 击 剧 扩 钮 ， 
从 弹出 的 下 拉 沫 单 中 可 以 选择 数据 源 关 型 。 


13.7.1 定义 记录 集 


Web 页 不 能 直接 访问 数据 库 中 存储 的 数据 ， 如 果 需 要 在 应 用 程序 中 使 用 数据 库 ， 必 
须 通 过 记录 集 这 个 中 介 媒 体 将 数据 库 和 网 页 应 用 程序 关联 起 来 。 记 录 集 是 针对 其 体 的 数据 
库 和 动态 网 页 进行 工作 的 ， 相 当 于 一 个 临 用 于 存放 从 数据 库 的 一 张 数据 表 或 多 
张 数据 表 中 所 取得 的 满足 条 件 的 有 效 数 据 。 它 是 通过 数据 库 碍 询 从 数据 库 中 提取 的 信息 
(记录 ) 的 子 集 ， a 

记录 集 由 查询 来 定义 ,查询 是 一 种 专门 用 于 从 数据 库 中 查找 和 提取 特定 信息 的 搜索 语 
句 , 由 搜索 条 件 组 成 。 这 些 语句 决定 记录 集中 应 该 包含 什么 , 不 包含 什么 。Dreamweaver 使 
用 结构 化 查询 语言 SQL 来 生成 查询 。 通 过 不 同 的 SQL 语 句 从 数据 库 的 一 个 表 或 者 多 个 表 中 
得 询 需 要 的 数据 组 成 一 个 记录 集 ， 以 满足 用 户 碍 询 数 据 库 中 各 种 数据 并 应 用 在 ASP 程 序 中 
的 要 求 。 可 以 说 ， 程 序 中 所 有 得 询 数据 库 数据 的 操作 《〈 非 更 新 、 删 除 ) ， 都 是 可 以 通过 记 
录 集 来 实现 的 。 

记录 和 集 从 数据 源 中 获取 数据 以 后 就 断 开 了 与 数据 源 之 间 的 连接 。 当 完成 了 各 项 数据 操 
作 以 后 ， 还 可 以 将 记录 集中 的 数据 送 回 数据 源 。 由 于 Web 服务 器 会 将 记录 集 临 时 放 在 内 
存 中 ,使 用 较 小 的 记录 集 将 占用 较 少 内 存 , 所 以 为 了 改善 服务 器 的 性 能 , 在 定义 记录 集 时 ， 
应 尽量 包含 应 用 程序 需要 的 数据 域 和 记录 。 记 录 集 建立 完成 后 ， 在 动态 网 页 代码 中 会 添加 
一 个 文件 包含 语句 ， 指 定 网 页 所 使 用 

为 了 改善 应 用 程序 的 性 能 ， 在 定义 记录 集 时 ， 应 尽量 包含 应 用 程序 需要 的 数据 域 和 记 
录 。 其 定义 的 一 役 步 又 如 下 : 

(1) 选择 “ 窗 口 ”/“ 文 件 ” 人 命令， 打开“ 文件” 面板 ， 在 “文件 ”窗口 中 选中 需要 
绑 定 数据 的 文件 并 双击 该 文件 。 

(2) 选择 “窗口 ”/“ 绑 定 ” 命 令 ， 在 弹出 的 “ 绑 定 ”面板 中 单 击 吉 | 把 钮 ， 从 弹出 的 
下 拉 荣 单 中 选择 “记录 集 (查询 ) ”命令 ， 打 开 “ 记 录 集 ”对 话 框 。 

(3) 在 “名 称 ” 文 本 框 中 输入 记录 集 的 名 称 。 不 能 在 记录 集 名 称 中 使 用 空格 或 特殊 

学 从 ， 一 般 可 以 使 用 “rs+ 数 据 库 名 称 ”， 以 便 与 其 他 对 象 区 别 开 来 ， 如 rsudbookdatal。 

(4) 从 “连接 ”下 拉 列 表 框 中 选择 一 个 数据 库 连 接 。 如 果 列 表 中 没有 数据 库 连 接 ， 
可 以 单 击 “ 和 定义” 按钮 建立 一 个 数据 库 连 接 。 

(5) 在 “表格 ”下 拉 列 表 框 中 ， 选 择 一 个 需要 的 表 。 在 “ 列 ” 选 项 的 单 选 按钮 中 选 
择 相应 的 单 选 按钮 。 如 果 选 择 “ 全 部 ”， 可 以 使 用 该 表 中 所 有 学 段 作 为 一 个 记录 集 ， 如 果 
选择 “ 选 定 的 ”， 则 可 以 按 住 Shift 键 或 Ctrl 键 选择 多 个 列 字 上段 作 为 一 个 记录 集 。 

(6) 在 “人 沛 选 ” 选 项 中 可 以 对 表 中 的 记录 进行 过 小 。 

在 第 一 个 下 拉 列 表 框 中 选择 与 您 定义 标准 值 对 应 的 字段 。 

在 第 二 个 下 拉 列 表 框 中 选择 条 件 表 达 符 号 ， 使 每 一 条 记录 的 值 与 标准 值 进 行 比较 。 

在 第 三 个 下 拉 列 表 框 中 选择 Entered Value 或 其 他 参数 ， 如 URE Parameter 、EForm 
Variable、Cookie、 阶 段 变 量 或 应 用 程序 变量 等 。 
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在 第 四 个 文本 框 中 得 入 标准 值 。 
(7) 如 末 需 要 对 记录 进行 排序 一 可 在 “排序 一 下 拉 列 表 中 设 症 对 筛选 记录 的 排序 方 


在 第 一 个 下 拉 列 表 框 中 选择 按 哪 个 学 段 进 行 排序 。 

在 第 二 个 列表 框 中 设置 排序 方式 。 

(8) 在 “如 果 失 败 ， 则 转 到 ” 文本 框 中 可 以 指定 一 个 旱 定 丫 负面。 

当 由 于 某 种 原因 而 导 八 记录 集 人 查询 失败 时 ， 将 重 定 问 至 该 页 耐 。 通常 显示 一 个 含有 到 
站 点 主页 的 链接 的 错误 信息 页面 。 

(9) 设置 完毕 后 ， 单 击 “ 测 试 ” 按 钮 ， 然 后 输入 测试 值 ， 则 连接 到 数据 库 并 创建 数 
据 源 实 例 ， 如 图 13-18 所 示 。 

(10) 蛙 击 “确定 ”按钮 天 闭 记录 集 。 


后 有 到 机 

拒 币 于 pas 

诺 币 于 下 局 攻 弄 后 市 独 / 抠 
量 记 三 万 卉 小 县 百 计 区 第 
此 民生 难 杆 已 习 品 束 铺 刘 


图 13-18 测试 记录 集 的 结果 


如 果 需 要 修改 记录 集 ， 可 以 在 “ 绑 定 ”面板 中 选中 记录 集 ， 然 后 双击 打开 “记录 集 ” 
对 话 框 进行 修改 。 

如 果 要 删除 某 个 记录 集 ， 选 中 该 记录 集 ， 然 后 单 击 “ 绑 定 ”面板 上 的 世 ] 按 钮 。 

与 编辑 数据 库 连 接 相 同 ， 修 改 或 删除 记录 集 以 后 ， 必 须 及 时 更 新 页 面 。 


13.7.2 定义 变量 


如 果 用 户 选 择 ASP 服 务 器 技术 ， 还 可 以 创建 3 种 数据 源 : 请 求 变 量 、 阶 段 变 量 和 应 用 程 
序 变 量 。 

使 用 数据 绑 定 面板 可 以 很 方便 地 定义 URL Variable URL 地址 变量 ) 、Form Variable 
(地 址 变量 ) 、Client Variable〈 客 户 地 址 变量 ) 、 阶 段 变 量 、 请 求 变 量 以 及 应 用 程序 变量 
等 变量 。 

1. 定义 请 求 变量 “请 求 变 量 可 以 从 客户 浏览 右 端 传送 到 服务 器 问 中 的 数据 中 获取 信 
忌 。 如 在 交互 表单 中 ， 用 户 输入 表单 数据 ， 然 后 单 击 “提交 ”按钮 ， 这 些 表单 数据 将 传送 
到 服务 器 端 ， 此 时 请 求 变 量 将 获取 客户 端的 数据 。 

定义 请 求 变量 的 具体 步骤 如 下 : 

(1) 选择 “窗口 ”/“ 绑 定 ” 沫 单 命 令 ， 打 开 “ 绑 定 ” 面 板 。 

(2) 单 击 “ 绑 定 ”和 面板 左上 角 的 而 按钮， 从 弹出 的 下 拉 有 亲 早 中 选择 “请 求 变 量 ” 
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令 弹出 “请 求 变 量 ” 对 话 框 。 
(3) 在 “类 型 ”下 拉 列 表 框 中 选择 请 求 变 量 的 类 型 ， 如 图 13-19 所 示 。 

该 下 拉 列 表 框 中 提供 了 6 种 类 型 ， 其 意义 分 别 如 下 : 

Request: 用 来 获取 任何 基于 HTTP 请 求 传 递 的 所 有 信息 ， 包 括 从 HTML 表单 用 
POST 方法 或 GET 方法 传递 的 参数 、cookie 和 用 户 认 证 。 

Request.Cookie: 用 于 获取 在 HTTP 请 求 中 发 送 的 cookie 的 值 ， 或 获取 客户 奖 存 储 
的 Cookie 值 。 

Cookie 是 一 个 标签 ， 是 一 个 唯一 标识 客户 的 标记 。 每 个 Web 站 点 都 有 目 己 的 标记 ， 
标记 的 内 容 可 以 随时 谈 取 ， 但 只 能 由 该 站 点 的 页 面 完成 。 一 个 Cookie 可 以 包含 在 一 个 会 
话 或 儿 个 会 话 之 间 某 个 Web 站 点 的 所 有 页 面 共 圣 的 信息 ， 使 用 Cookie 还 可 以 在 页 面 之 
间 交 换 信息 。 

Regquest.QueryString: 检索 HTTP 答 询 字符 串 中 变量 的 值 ，HTTP 会 询 学 符 串 由 问号 
后 的 全 指定 。 

Request,Form: 用 于 获取 客户 姗 表单 上 所 传送 给 服务 右 冰 的 数据 。 

Request.ServerVariable: 获取 客户 端 信息 以 做 出 啊 应 。 

例如 : 使 用 Regquest.ServerVariable("REMOTE_ADDR") 获 取 用 户 的 PP 地址 ; 使 用 
<%=Request.ServerVariable("REMOTE_ADDR")%> 语 句 使 用 该 IP 地 址 。 

Request.ClientCertificate: 用 于 获取 客户 新 的 身份 认证 信息 。 

(4) 在 “名 称 ” 文 本 框 中 输入 请 求 变 量 的 名 称 。 
(5) 单 击 “ 确 定 ” 按 钮 即 可 完成 操作 。 

2. 定义 阶段 变量 ”使 用 阶段 变量 可 以 跟踪 客户 信息 ， 如 Web 页 面 注册 统计 。 在 创建 
会 话 时 ， 服 务 器 会 为 每 一 个 会 话 生 成 一 个 单独 的 标识 。 会 话 标 识 以 长 整形 数据 类 型 返回 。 

单 击 “ 比 定 ” 面 板 左 上 角 的 出 按钮 ， 从 弹出 的 下 拉 沫 单 中 选择 “阶段 变量 ”命令 ， 弹 
出 图 13-20 所 示 的 “阶段 变量 ”对 话 框 。 


图 13-19 “请 求 变 量 ” 对 话 框 图 13-20 “阶段 变量 ”对 话 框 


在 “名 称 ” 文 本 框 中 输入 “阶段 变量 ”的 名 称 ， 然 后 单 击 “ 确 定 ” 按 钮 即 可 完成 操作 。 

例如 ， 如 果 要 使 用 阶段 变量 存储 访问 者 的 登陆 ID， 并 在 网 页 中 显示 ， 则 可 以 在 “阶段 
变量 ”对 话 框 中 输入 登陆 ID 的 变量 名 (例如 CustomID) ， 并 单 击 “ 确 定 ” 按 钮 。 这 种 操作 
的 功能 与 在 源 代码 中 写 入 Session (C"CustomID") 的 功能 是 相同 的 。 

3. 定义 应 用 程序 变量 ”使 用 应 用 程序 变量 可 以 在 给 定 应 用 程序 的 所 有 用 户 之 间 共 享 
言 息 ， 并 在 服务 器 运行 期 间 持久 地 保存 数据 。 

单 击 “ 绑 定 ” 面 板 上 的 大 按钮 ， 从 弹出 的 下 拉 菜 单 中 选择 “应 用 程序 变量 ”命令 ， 弹 
出 图 13-21 所 示 的 “应 用 程序 变量 ”对 话 框 。 
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图 13-21 “应 用 程序 变量 ”对 话 框 


在 “名 称 ” 文本 框 中 输入 应 用 程序 变量 的 名 称 ,然后 单 击 “ 确 定 ”按钮 即 可 完成 操作 ， 


在 “应 用 程序 变量 ”对 话 框 中 输入 的 变量 名 与 在 源 代 人 码 中 写 入 Application(" 变 量 名 ") 
的 功能 一 样 。 


13.8 绑 征 动态 数据 


建立 数据 源 之 后 ， 如 果 要 将 数据 库 中 的 记录 动态 显示 在 网 页 上 ， 只 要 将 记录 集中 的 内 
容 绑 定 到 网 页 的 相应 位 置 即 可 实现 数据 库 内 容 在 网 页 上 的 显示 。 

数据 绑 定 解决 了 服务 器 访问 数据 库 的 有 关 问 题 ， 可 以 把 HTML 对 象 绑 定 到 来 自 一 个 数 
据 源 的 数据 上 ， 当 该 页 面 被 加 载 时 ， 页 面 会 自动 从 数据 源 中 提取 数据 ， 然 后 在 该 元 素 内 进 
行 格式 化 并 显示 出 来 。 在 Dreamweaver 中 ， 不 需要 编写 任何 代码 ， 只 需要 拖 动 网 页 元 素 ， 
就 可 以 插入 动态 文本 或 图 像 ， 将 它们 与 表单 对 象 、 列 表 或 其 他 网 页 对 象 相 链接 。 

下 面 演示 在 页 面 中 绑 定 一 个 Spry XML 记录 集 的 一 般 步 又 。 

01 在 Dreamweaver 中 新 建 或 打开 一 个 动态 网 页 , 并 在 页 面 中 插入 用 于 显示 数据 的 表 
格 。 本 例 在 网 页 中 插入 一 个 四 行 两 列 的 表格 , 在 表格 的 第 一 列 分 别 输入 “编写”、“ 名 称 ”、 
“分 类 ”和 “图 片 ”。 此 时 的 页 面 效 果 如 图 13-22 左 图 所 示 。 

02 将 光标 定位 在 表格 的 第 一 行 第 二 列 的 单元 格 中 ， 然 后 打开 “ 绑 定 ”面板 ， 选 中 
记录 集中 的 ID 字段 ， 并 拖 入 表格 的 相应 位 置 ， 或 单 击 绑 定 窗口 右 下 角 的 “搬入 ”按钮 。 

03 按照 上 一 步 的 方法 ， 将 记录 集中 的 其 他 字段 拖 放 到 表格 中 相应 位 置 ， 此 时 的 表 
格 如 图 13- Oe 


和 中 预览 运行 效果 。 


es 


: Ds Wi ee 
AR 和 ，。 CD 
BR GL rr 
2, Geeertetlty 
nt i 


ooo Vooooooooeeeseoooosooooosssoossosoeeoeeoeoeeeoeeeeoeereeeeeeees® 


图 13-22” 绑 定数 据 前 后 的 效果 
13.9 设置 实时 视图 


Dreamweaver 的 实时 数据 编辑 环境 能 够 让 网 页 设计 人 员 在 编辑 环境 中 实时 预览 可 编辑 
数据 的 Web 应 用 ， 这 样 可 以 有 效 地 提高 工作 效率 ， 减 少 重复 劳动 。 


(1) 在 Dreamweaver 的 文档 窗口 项 部 单 击 “ 实 时 视图 ”按钮 ， 在 文档 窗口 项 部 显示 浏 
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览 器 导航 栏 ， 如 图 13-23 所 示 。 
[二 玛 下 拆 分 本 设计 |[ 实时 视图 | | 实时 做 码 | 检查 © httpiilocahostiblogimytest. osp ~| a. 
图 13-23 ”浏览 右 导 航 栏 
(2) 单 击 浏览 器 导航 栏 最 右 侧 的 “实时 视图 选项 ”按钮 图 :， 在 弹出 的 菜单 中 选择 
“HTTP 请 求 设置 …” 命 令 ， 打 开 如 图 13-24 所 示 的 实时 视图 设置 对 话 框 。 在 该 对 话 杠 中 ， 
用 户 可 以 通过 添加 URL 人 请求， 以 查看 动态 数据 。 


Se 


-| 健 存 全 文科 69 以 置 


图 13-24 “实时 视图 设置 ”对 话 框 


(3) 单 击 该 对 话 框 顶 部 的 车 接 钮 ， 为 每 一 个 变量 指定 名 称 和 测试 值 。 例 如 “名 称 ” 
为 username，“ 值 ”为 vivi。 

(4) 在 “方法 ”后 面 的 下 拉 列 表 框 中 选择 网 页 递交 表单 时 的 方式 : POST 或 GET， 默 
认为 GET。 有 关 POST 和 GET 的 说 明 ， 读 者 可 参阅 本 书 9.1.1 市 的 内 容 。 

(5) 选中 “保存 该 文档 的 设置 ” 复 选 框 。 

(6) 设置 完成 后 ， 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

(7) 保存 文档 。 蛙 击 Dreamweaver 文 档 窗 口 项 部 的 “刷新 ”按钮 人 @， 即 可 预览 页 而 运 
行 效果 。 此 时 ， 浏 览 右 导航 栏 的 地 址 下 拉 列 表 中 会 出 现 指 定 的 URL 请 求 ， 如 图 13-25 所 示 。 


Rc | 


图 13-25 ”URL 请求 


13.10 ”制作 动态 网 页 元 素 


在 动态 网 页 中 用 到 的 动态 元 素 有 很 多 种 ， 如 动态 表 蛙 对象、ActiveX 控 件 、Flash 图 像 、 
动态 图 片 和 动态 文本 等 。 

在 Dreamweaver CS6 中 ， 几 平 可 以 将 动态 内 容 放 在 Web 页 或 其 HTML 源 代码 的 任何 地 
方 。 通 过 “ 绑 定 ”面板 选择 内 容 源 ， 可 以 癌 页 面 中 添加 动态 内 容 。Dreamweaver 在 页 面 的 
代码 中 插入 一 个 服务 器 端 脚本 ， 以 指示 服务 需 在 浏览 器 请 求 访 页面 时 ， 将 内 容 源 中 的 数据 
传输 到 页 面 的 HTML 代 码 中 。 


13. 10. 1 动态 文本 


使 用 动态 文本 可 以 使 文本 在 网 页 上 深 动 、 变 换 、 隐 和 藏 或 显示 等 ， 下 面 通过 创建 计数 细 
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的 实例 进一步 说 明 如 何在 网 页 中 添加 动态 内 容 。 
019 新 建 一 个 ASP VBScript 文 件 ， 布 局 “无 ”。 
02 在 文档 窗口 中 输入 “欢迎 光临 我 的 个 人 主页 ， 您 是 访问 我 们 的 第 *** 位 客户 。” 
03 和 选择 “窗口 ”/“ 绑 定 ” 命 令 ， 打开 “ 绑 定 ”面板 。 单 击 “ 绑 定 ” 面 板 左 上 角 的 加 
按钮 ， 从 弹出 的 下 拉 表 日 中 选择 “应 用 程序 变量 ”命令 。 
04 朋 在 弹出 的 “应 用 程序 变量 ”对 话 框 中 输入 变量 的 名 称 counter， 然 后 单 击 “ 确 定 ” 


按钮 关闭 该 对 话 框 。 
05 切换 到 “文档 ”窗口 的 “代码 ”视图 ， 在 <html> 之 前 加 入 如 下 代码 : 
<% 
Application ("counter") =Application ("counter") +1 
or 


06 切换 到 “设计 ”视图 ， 在 文档 窗口 中 选择 “***” 字 样 ， 然 后 在 “ 绑 定 ”面板 中 
选择 刚才 定义 的 全 局 变量 ， 再 单 击 数据 绑 定 面板 底部 的 “插入 ”按钮 ， 则 “#s#x* ”将 被 
{Application.counter} 占 位 符 代 和 登 ， 如 图 13-26 所 示 。 

07 选择 “文件 ”/“ 你 存 ” 命 令 ， 将 修改 后 文档 保存 到 本 地 站 点 中 。 然 后 将 该 文件 
重新 上 传 到 远程 服务 器 上 。 

0 四 打开 浏览 右 ， 然 后 在 地 址 栏 中 输入 刚才 保存 文件 的 URL 地 址 ， 则 会 打开 ASP 页 
面 ， 显 示 如 图 13-27 上 所 示 。 


三 无 标题 文 挡 一 Windows Internet Explorer 辐 回 因 

IS 
的 CHTIL)# - 口 X 遍 收 藏 天 | 帘 如 
^ 大 无 标题 应 


ee or 


~“ Yh | 
欢迎 先 晶 我 阳 介 大 到 页 ! 
~ p> 0 、 
访问 我 们 队 第 1000 全 窗户 
~ 如 


图 13-26 ”将 记录 绑 定 到 页 面 上 图 13-27 ”实例 效果 图 
用 户 每 单 击 一 次 “刷新 ”按钮 ， 就 可 以 看 到 下 和 面 计数 器 的 数值 就 会 增加 1。 狐 创建 的 
网 站 ， 由 于 没有 太 多 的 宣传 ， 每 天 的 访问 量 不 大 。 这 时 可 以 通过 改变 Application("counter") 
的 数值 来 显示 较 大 的 数学 。 只 将 


<% 

Application ("counter") =Application ("counter") +1 
o> 

修改 为 如 下 所 示 的 代 但 : 

<% 


If Application ("counter") < 999 then 
Application ("counter") =999 
End If 
200 


Application ("counter ) =Application ( "counter ) +1 
%> 
这 样 该 网 页 被 访问 时 计数 右 的 数 季 是 从 1000 开 始 。 


13. 10. 2 动态 图 像 


在 网 上 购物 可 以 友 现 每 一 个 网 页 基本 上 都 包括 一 件 商 品 的 照片 和 描述 该 商品 的 文本 ， 

网 页 的 布局 保持 不 变 ， 经 常 变 换 的 是 商品 的 照片 和 描述 该 商品 的 文本 。 使 用 Dreamweaver 
的 动态 图 像 和 动态 文本 可 以 很 轻松 地 实现 这 种 功能 ， 其 具体 的 操作 步骤 如 下 : 

(1) 新 建 一 个 文档 或 打开 一 个 需要 创建 动态 岁 像 的 文档 。 

(2) 将 光标 放置 在 需要 插入 动态 图 像 的 位 置 。 选 择 “ 插 入 ”/“ 图 像 ” 命 令 ， 弹 出 “ 选 
择 图 像 源 文件 ”对 话 框 。 

(3) 在 该 对 话 框 中 的 “选择 文件 名 目 ” 后 面 有 两 个 单 选 按钮 ， 这 里 要 插入 动态 网 像 ， 
则 单 击 选 择 “ 数 据 源 ” 单 选 按 钮 ， 此 时 对 话 框 中 会 将 数据 源 列 出 ， 如 图 13-28 所 示 。 


选择 文件 名 自 : 〇 ) 文件 系统 
@) 数据 源 


P 


第 一 个 记录 索引 ] 


最 后 一 个 记录 索引 ] 
总 记录 数 ] 


pplication 


URL.: [Eile: /IC |/Inetpub/wwwr oot/ images/ 


在 站 点 定义 中 更 改 默 认 的 链接 相对 于 


图 13-28 “选择 图 像 源 文件 ”对 话 框 
(4) 在 数据 源 列 表 中 选择 一 个 需要 的 数据 源 。“URL” 文 本 域 中 目 动 填充 相应 的 代 


但 。 
(5) 设置 完成 后 ， 单 击 “ 人 确定 ”按钮 天 闭 对 话 框 。 
(6) 选择 “文件 ”/“ 你 存 ” 命 令 ， 保 存 文件 ， 并 在 浏览 占 中 预先 图 片 。 


13.11 实例 制作 之 “我 的 店铺 ”页 面 


本 方 讲述 制作 导航 图 片 “ 我 的 店铺 ”的 链接 页 面 。 该 页 面 读 取 数据 库 中 的 商品 数据 ， 
并 将 商品 分 页 显示 。 
01 月 动 Microsoft Access， 新 建 一 个 名 为 productmdb 的 数据 库 ， 在 弹出 的 对 话 框 中 
双击 “使 用 设计 器 创建 表 ”， 在 打开 的 表 设 计 视 网 中 议 计 表 络 构 ， 如 网 13-29 所 示 。 
02 将 设计 的 表 保 存 为 pro。 然 后 在 弹出 的 对 话 框 中 双击 表 名 称 pro,， 在 打开 的 视图 中 
添加 表 记 录 ， 如 图 13-30 所 示 。 
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03 保存 数据 表 后 ， 天 闭 Access。 执行 “区 件 ，/“ 痢 建 ” 沫 单 命 令 ， 打 开 “ 独 建文 
档 ” 对 话 框 ,在 对 话 框 左 侧 选择 “ 空 昌 页 ”, 在 “负面 类 型 ”列表 中 选择 “ASP VBScript”， 
单 击 “ 创 建 ” 按 钮 新 建 一 个 空 日 的 ASP 页 面 ， 你 存 为 shop.asp。 


图 13-29 设计 表 结 构 


围 pr Xx 
ID ~ t ypheE > n_ane ~ pjica 全 
1 纸巾 套 Q 版 奶牛 纸巾 抽 images/sl. jpg 上 
引 纸巾 套 草 蕉 圆 形 纸巾 简 / 纸 巾 套 images/s2. jpg i 
3 引 编织 管 毛 绒 小 能 玉米 皮 手 机 揪 皮 imagesybl. jpg 


di 化 妆 盒 粉 蓝 化 妆 品 收纳 盒 images/hl. ipg 
5 钥匙 扣 俱 嘲 猴 情 合辑 匙 链 images/Y2. jpg 


6 钥匙 扣 金色 小 老 妃 钥匙 扣 images/yl. jpg 要 
记录 : 4 1 人 第 1 项 共 6 项 | 站 幸 | 系 | 搜索 | 1 EU » 


图 13-30 ”添加 记录 


为 保持 网 站 页 面 的 统一 风格 , shop.asp 的 页 面 布局 将 设计 为 与 其 他 HTML 页面 一 样 的 布 
局 。 读 者 可 以 按照 前 面 讲述 的 主页 制作 过 程 重 狐 设计 shop.asp 的 页 和 面 布局 。 一 个 简单 的 方 
法 是 将 模板 的 布局 复制 到 动态 页 面 。 

04 明 打开 index.html， 将 其 另存 为 HTIML 页面。 然后 执行 “修改 ”/“ 模 板 ”/“ 从 模板 
中 分 离 ” 荣 单 命 令 。 

Index.html 是 基于 模板 新 建 的 , 带 有 模板 标记 。 这 一 步骤 可 以 删除 代码 中 不 需要 的 模板 
标记 ， 从 而 可 以 直接 复制 到 shop.asp 页 面 。 

05 切换 到 HTML 文 件 的 “代码 ”视图 ， 从 “<head>” 开 始 ， 选 择 以 下 所 有 的 代码 ， 
然后 单 击 右键 ， 从 上 下 文 菜 单 中 选择 “拷贝 ”命令 。 

06 切换 到 shop.asp 的 “代码 ”视图 ， 选 中 从 “<head>” 开 始 往 下 的 所 有 代码 ， 然 后 
早 击 右键 ， 从 上 下 文采 单 中 选择 “ 精 贴 ”命令 。 此 时 切换 到 “设计 ”视图 ， 可 以 看 到 除 模 
板 标记 以 外 ，shop.asp 的 页 面 布 局 和 内 容 与 index.html 一 样 。 

07 在 正文 区 域 将 “欢迎 光临 我 的 小 屋 ” 修 改 为 “欢迎 光临 我 的 小 店 ”。 

08 9 市 除 正 文 区 域 第 二 行 到 第 四 行 的 内 容 ， 并 切换 到 “代码 ”视图 删除 第 四 行 单元 
格 中 的 <marquee> 标 记 。 然 后 选中 第 二 行 到 第 四 行 单 元 格 ， 单 击 属 性 面板 上 的 “合并 单元 
格 ” 图 标 按钮 ， 将 所 选单 元 格 合并 为 一 行 。 

09 在 属性 面板 上 将 合并 的 单元 格 内 容 的 水 平 对 齐 方式 设置 为 “居中 对 齐 ”， 王 直 
对 齐 方式 为 “顶端 ”*， 然 后 单 击 “常用 ”和 面板 上 的 表格 图 标 按钮 ， 在 弹出 的 “表格 ”对 话 
框 中 设置 行 数 为 2， 列 数 为 4， 表 格 宽 上 度 为 480 像 素 ， 边 框 粗细 为 1 像素 。 
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10 自 选中 表格 ， 在 属性 面板 上 设置 其 “填充 ”和 “间距 ” 均 为 2。 蛙 击 “ 编 辑 规则 ” 
按钮 ， 在 弹出 的 “ 狐 建 CSS 规 则 ”对 话 框 中 指定 选择 器 类 型 为 “类 ”， 选 择 占 名 称 
为 .tableborder。 该 CSS 规则 用 于 定义 表格 边框 闫 色 。 单 击 “ 确 定 ” 按 钮 ， 在 弹出 的 规则 定 
义 对 话 框 中 选择 “边框 ”分 类 ,设置 边框 类 型 为 solid， 边 框 沉 度 为 2， 边 框 闫 色 为 #9C0。 

11 选中 第 一 行 单元 格 ， 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 齐 方式 为 “居中 对 
齐 ”。 然 后 输入 需要 的 文本 内 容 。 例 如 : 编 瑟 、 产 品名 称 、 类 列 、 缩 略图 。 

12 肯 执行 “窗口 ”/“ 数 据 库 ”菜单 命令 ， 打 开 “ 数 据 库 ”浮动 面板 。 单 击 面板 左上 


13 在 弹出 的 “数据 源 名 称 (DSN) ”对话 框 中 ， 输 入 连接 名 称 myconn， 然 后 单 击 
“定义 ”按钮 ， 弹 出 “ODBC 数 据 源 管理 器 ”对 话 框 ， 单 击 对 话 框 项 部 的 “系统 DSN” 页 
签 。 

14 月 单 击 “ 这 加 ” 投 钮 ， 在 弹出 的 “创建 新 数据 产 ” 对 话 框 中 选择 “Microsoft Access 
Driver (*.mdb)”， 然 后 单 击 “完成 ”按钮 ， 弹 出 “ODBC Microsoft Access 安装” 对话 框 。 

15 在 “数据 源 名 ”文本 框 中 键入 数据 源 的 名 称 blogtest。 在 “说 明 ” 文 本 框 中 键入 
数据 源 的 介绍 。 单 击 “ 选 择 ” 按 钮 ， 在 弹出 的 “选择 数据 库 ” 对 话 框 中 选择 需要 的 数据 库 ， 
并 单 击 “ 确 定 ” 投 钮 关闭 对 话 框 。 

16， 选中 “使 用 本 地 DSN” 单 选 按钮 ， 单 击 “ 测 试 ” 按 钮 测试 连接 是 否 成 功 。 测 试 
成 功 后 ， 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 此 时 创建 的 数据 库 连 接 将 出 现在 “数据 库 ” 列 表 


裤 提 机 :在 连接 数据 库 时 ， 读 者 还 可 以 使 用 自 定 义 连接 字符 囊 方式 ， 


i Driver={Microsoft Access Driver (*.mdb)};,DBQ= ci\inetpub\wwwroot\blog\data\ | 


| product.mdb 


17 切换 到 “ 绑 定 ”浮动 面板 ， 单 击 面 板 左上 角 的 让 按钮 ， 从 下 拉 亲 早 中 选择 “ 记 
录 集 (人 查询) ”选项 ， 打 开 “ 记 录 集 ”对 话 框 。 

18 在“ 名称” 文本 框 中 输入 记录 集 的 名 称 rsl, 在 “连接 ”下 拉 列 表 中 选择 “myconn”， 
在 “表格 ”下 拉 列 表 中 选择 pro， 其 余 选 项 保留 默认 设置 ， 如 图 13-31 所 示 。 单 击 “ 测 试 ” 
按钮 可 以 查看 建立 的 记录 集 内 容 。 

19 单 击 “确定 ”按钮 天 闭 对 话 框 后 ， 创 建 的 记录 集 显 示 在 “ 绑 定 ”列表 中 。 

20 将 光标 定位 在 表格 的 第 二 行 第 一 列 的 单元 格 中 ， 设 置 单 元 格 内 容 水 平 左 对 章 ， 
垂直 居中 ， 然 后 选中 “ 绑 定 ”面板 中 的 “ID” 数 据 项 ， 和 再 单 击 “ 绑 定 ” 面 板 底部 的 “插入 ” 
按钮 ， 将 所 选 数据 项 插入 到 单元 格 中 。 

21 按照 上 一 步 的 方法 ， 分 别 将 n_ame 和 t_ype 数 据 项 插入 到 第 二 行 的 第 二 列 和 第 三 
列 中 ， 然 后 设置 第 四 列 单元 格 内 容 水 平和 竺 直 对 章 方式 均 为 “ 届 中 ”， 并 插入 一 幅 图 片 。 

22 选中 插入 的 图 片 ， 选 中 “ 绑 定 ”面板 中 的 “pic” 数 据 项 ， 然 后 在 “ 绑 定 ”面板 
底部 的 “ 比 定 到 ”下 拉 列 表 中 选择 数据 项 绑 定 的 标签 img.src， 并 单 击 “ 绑 定 ” 按 钮 。 此 时 
的 页 面 效果 如 图 13-32 所 示 。 

23 引 选中 表格 的 第 二 行 ， 并 打开 “服务 器 行为 ”浮动 面板 ， 然 后 单 击 “服务 天 行 为 ” 
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kod uss 


主 淋 河 习 缠 闷 


《4Z7》 DreafmWwearerlCg6 中 六 版 入 门 与 接 高 实例 款 有 
dat 


面板 左上 角 的 电 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 “重复 区 域 ”选项 ， 弹 出 “重复 区 域 ” 对 
话 框 。 


欢迎 光临 我 的 小 让 


编号 产品 名 称 | 类别 
fs1.ID} {rsl.n_ame)} 


{rsl.t_ype} 


图 13-31 “记录 集 ” 对 话 框 图 13-32 ” 绑 定 数据 后 的 效果 


24 月 在 “记录 集 ” 下 拉 列 表 中 选择 rs1， 在 “显示 ”区 域 选 中 第 一 项 ， 并 在 文本 框 中 
输入 3， 即 每 页 显示 3 条 数据 。 此 时 的 页 面 效 果 如 图 13-33 所 示 。 

25 9 将 光标 定位 在 表格 的 右 侧 ， 然 后 按 下 Shift + Enter 组 合 键 插 入 一 个 软 回 车 。 执 行 
“插入 ”/“ 表 格 ” 命 令 ， 插 入 一 个 一 行 四 列 的 表格 ， 表 格 宽度 为 60%， 边 框 粗细 为 0。 选 
中 表格 ， 设 置 单 元 格 内 容 水 平和 垂直 对 齐 方式 均 为 “居中 ”。 

26 将 光标 定位 在 第 一 列 单元 格 中 ， 切 换 到 “服务 器 行为 ”面板 ， ee “+” 
按钮 ， 在 弹出 的 菜单 中 选择 “记录 集 分 页 ”/“ 移 至 第 一 条 记录 ”命令 ， 弹 出 “ 移 至 第 
记录 ”对 话 框 。 在 “链接 ”下 拉 列 表 中 选择 “创建 新 链接 : 第 一 页 ”， 在 “记录 集 ” 下 拉 
列表 中 选择 rs1， 然 后 单 击 “确定 ”按钮 关闭 对 话 框 ， 为 页 面 添加 一 个 “第 一 页 ”的 导航 。 
同 理 ， 执 行 “ 移 至 前 一 条 记录 ”、“ 移 至 下 一 条 记录 ”和 “ 移 至 最 后 一 条 记录 ”命令 ， 添 
加 相应 的 导航 链接 。 插 入 完毕 后 的 导航 条 如 图 13-34 所 示 。 


允 迎 省 临 玫 的 二 隔 
次 ) 印 放量 我 的 小 店 TP 


ErrlL I zl me} Erzli wpey EE” 


篇 号 产品 名 称 。 ”| ”类别 缩 略 图 
{1s1.ID} fsln_ ame} fs1.t ype} 区 ] 二 
图 13-33 重复 区 域 图 13-34 ”插入 的 记录 和 集 导 航 条 


27 调整 导航 条 表格 的 客 度 和 高 上 度 ， 并 将 其 中 的 链接 文本 修改 为 第 一 页 、 上 一 页 、 
Fy J 

由 于 在 个 人 网 站 实例 中 创建 的 CSS 样 式 表 定义 了 超级 链接 文本 的 颜色 为 绿色 ， 因 此 插 
入 的 记录 集 导航 条 的 链接 文本 也 显示 为 绿色 。 

28 保存 页 面 ， 并 按 F12 键 在 浏览 器 中 预 吃 页 面 效果 ， 如 图 13-35 所 示 。 

本 例 的 记录 集中 共有 6 条 记录 ， 每 页 显示 3 条 ， 所 以 分 两 页 显示 。 在 第 一 页 显示 “下 一 
页 ”和 “最 后 一 页 ”链接 。 单 击 “ 下 一 页 ”链接 文本 ， 则 显示 第 二 页 ， 如 图 13-36 所 示 。 

单 击 “ 第 一 页 ”或 “前 一 页 ”链接 文本 ， 可 以 切换 到 相应 的 页 面 。 

至 此 ， 个 人 网 站 实例 制作 完毕 。 
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欢迎 光临 我 的 小 店 


| Te | 纸巾 套 


毛纺 小 甬 玉 米 度 手 机 
“所 池 物 攻 钨 织 衣 


吉 一 页 前 一 页 下 一 页 最 后 一 页 


rnp ZBI 


四 
mm 

~ wa 

< 一 < 


欢迎 光临 我 的 小 店 


编号 | 产品 G 和 你 | 关 则 | 


粉 蓝 化 妆 品 收纳 盒 | 化 站 全 


全 色 小 老 扎 钥 题 扣 


各 一 页 堵 一 页 下 一 页 最 局 一 页 


Copyright Vni 2012 
Email: ‘hiR123 .com 


图 13-36 页面 预 钨 效果 2 
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DEeamweaver CS6 实战 演练 


种 14 草 旅游 网 站 绽 合 实例 
种 15 草 儿 重 教育 网 站 绽 合 实例 
第 16 草 -时 间 资 讯 网 站 综合 买 例 


种 17 草 电 椰 商务 网 如 绽 合 实例 


加 加“ 司 恬 加 加 必用 回国 大 加 
pe | ee 


介 ， a de 


a 


me 国 国 


it 
ge 


Dreamweale SS 中 人 2 与 
Fi _ 和 站 


本 [ 
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14.1 实例 介绍 


旅游 网 站 综合 实例 是 介绍 全 国 各 地 著名 旅游 景点 的 网 站 。 本 例 用 到 众多 的 知识 点 ， 包 
括 模板 技术 、 热 点 图 像 导 航 等 各 种 超级 链接 、 利 用 行为 制作 弹出 式 菜 单 、 表 格 、 库 项 目 以 
及 跑马 灯 效 果 的 制作 等 。 整 张 页 面 主要 使 用 表格 进行 布局 。 

本 例 有 许多 页 , 但 本 书 内 容 主要 集中 在 介绍 模板 制作 方面 , 然后 在 模板 的 基础 上 制作 
站 页 及 “武夷 山 概 况 ” 页 面 ， 最 终 效 果 如 图 14-1 所 示 。 


版 析 所 有 : Copyright ComeySoft 2012 
建议 使 用 浏览 器 IE S.0 以 上 ， 屏 幕 分 辩 率 1024x768 
Ematwebmaster 人 123-com 


14-1 实例 效果 (1) 


光标 保留 在 北京 等 导航 栏 上 时 弹出 下 拉 琳 单 ， 如 图 14-2 所 示 。 
单 击 弹 出 亲 单 中 的 “武夷 山 ” 可 以 跳 转 到 “武夷 山 概况 ”页 面 ， 如 图 14-3 所 示 。 
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版 权 所 有 ,Copyright ComeySof 2912 
建 雇 征用 淹 帮 名 下 400 上 ， 翌 划分 因素 1024768 
Exam och 12 wor 


14-2 ”实例 效果 (2) 


遇 相 也 有 ， Compyrisht ComerSoft 2012 
建议 使用 浏览 器 正 30RL 上 。 屏 划分 解 盏 1024-768 
Bromineon 


14-3 ”实例 效果 (3) 


14.2 准备 工作 


在 开始 制作 本 例 之 前 ， 先 介绍 一 下 制作 本 旅游 网 站 所 需 的 准备 工作 。 
0o 亿 在 硬盘 上 新 建 lvyou 目录 ， 在 lvyou 目录 下 创建 images 子 目录 。 
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友 "EO7WeEaIEAULSG TY NMR 与 提高 实 倒 改 布 


02 部 和 二 并 贡生 医生 CW Fireworks) 里 制作 所 需 的 图 片 ， 如 图 14-4 所 示 。 把 这 些 
图 片 保 存 到 Sia 目录 下 ， Et 到 的 图 万 也 部 复 扰 到 本 目录 。 


图 14-4 ”图片 


03 启动 Dreamweaver CS6, 执行 “站 点 ”新 建站 点 ”命令 新 建 一 个 本 地 站 点 lvyou， 


使 其 指 问 lvyou 目录 。 
至 此 ， 准 备 工作 完毕 可 以 开始 制作 网 站 页 面 了 。 


14.3 制作 模板 


本 例 中 模板 是 制作 其 他 页 面 的 基础 ,， 所 有 页 面 都 将 从 同一 个 柑 板 创建 。 制 作 模板 的 其 
体 步 又 如 下 : 
01 启动 Dreamweaver CS6， 新 建 一 个 HTML 文件。 执行“ 修改 ”/“ 页 面 属 性 ” 
令 ， 在 弹出 的 对 话 框 中 设置 页 面 的 “外 观 (CSS)” 和 “链接 (CSS)” 选 项 属性 ， 具体 设 
置 如 图 14-5 和 图 14-6 所 示 。 


页 面体 加 )- | 点 议 字 你 Sn 
大 夫 丁 v 
文 六 站 了 色 辣 ); | 
背景 下 色 了 ): | 
背 最 四 俐 T /Inst vor wai [ 词 多 2) 
重 昌 0) 本 
左 过 荆 四 ) 名 2 了 大 这 中 但 
上 边 入 FF) ~ 下 这 下 
[00] CD CR CBW 


图 14-5 页 面 属性 (1) 


02 具 单 击 “ 确 定 ”按钮 ， 完 成 页 面 属性 设置 ， 然 后 在 页 面 中 插入 一 个 三 行 三 行 的 表 
格 ， 表 格 宽度 为 750 像素 ， 边 框 粗细 为 0。 选 中 表格 ， 在 属性 面板 上 的 “对 齐 ” 下 拉 列 表 
中 选择 “居中 对 章 ”“ 填 充 ” 和 “间距 ” 均 为 0。 


情 扫 E55] 
刁 接 字 导 立 ): | 赂 页 面 玫 伟 】 


he 
创汇 同色 郊 1， 辆 | 区 要 如 图 淖 倒 报 总 ); 醒 | 二 的 
Fa] EE 活动 链 撞 AI: 天 | 者 加 
下 填 册 本 式 刷 | 国 本 了 人 和 业主 


[Lo | Cm ][ Wm |] LE |] 


图 14-6 页 面 属性 (2) 
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03 将 光标 定位 在 第 一 行 单元 格 申 ， 设 置 单元 格 内 容 水 平 对 齐 方式 为 “居中 对 齐 ”， 
五 直 对 齐 方式 为 “顶端 ”然后 插入 一 张 图 片 , 修改 图 片 客 度 为 750 像素 ， 蜗 度 为 80 像素 。 
这 时 文档 效果 如 图 14-7 所 示 。 

04 合并 第 二 行 的 3 列 单元 格 ， 这 时 文档 效果 如 图 14-8 所 示 。 


r r 
二 wntitiea-! Crim)* 央 wntitlea-! Gm)* 


习 | | 区 | 
[RJ 00% >*| 画 男 恩 吕 > 260v 42 7 HR <tr St (RJD hoo% v| 回回 [| 520 x 260v 42 7 


图 14-7 设置 页 面 属性 和 插入 图 像 的 效果 图 14-8 ”插入 表格 的 效 采 


03 把 光标 定位 在 表格 第 二 行 单元 格 内 ， 设 置 单元 格 内 容 水 平 对 齐 方式 为 “居中 对 
齐 ”， 竺 直 对 章 方式 为 “顶端 ” 然后 单 击 “ 插 入 ” 栏 的 “Spry” 标 签 ， 切 换 到 Spry 工具 
面板 ， 单 击 Spry 菜单 栏 图 标点 ， 在 弹出 的 “Spry 菜单 栏 ” 对 话 框 中 选择 菜单 布局 为 “水 
”如 图 14-9 所 示 。 插 入 后 的 采 蛙 位 如 图 14-10 所 示 。 
Spry 框架 集成 的 SpryMenuBar.js 脚本 文件 无 需 用 户 编写 来 单 弹 出 代码, 豆单 栏目 均 采 
用 基于 Web 标准 的 HTML 结构 形式 ， 编 辑 方便 。 


| Cnetp ub ment il ro pd htsl (EETHLY 


RH SpryllenabarHorirzental. ess Spryllerubor. js 


请 选择 所 需 的 市 局 。 
© 三 水 平 
9】 = 三 攻 3 
CP [Jeo hm ~ 画面 | Si sem HK 
图 14-9 “Spry 菜单 栏 ”对 话 杠 图 14-10 ”插入 采 单 栏 的 效果 


06 选中 插入 的 Spry 菜单 栏 ,在 属性 面板 上 设置 其 菜单 项 。 单 击 左边 第 一 个 列表 框 
中 的 “项 目 1”， 在 最 右边 的 “文本 ” 栏 键入 需要 的 菜单 项 的 名 称 ， 如 首页 ， 并 设置 “ 链 
接 ” 的 目标 文档 。 用 同样 方法 设置 其 他 一 级 采 单 项 。 如 果 一 级 且 香 项 多 于 4 个 ， 单 击 列表 
框 顶 部 的 加 号 按钮 ， 即 可 添加 一 个 一 级 亲 单 项 ; 如 果 少 于 4 个 ， 单 击 减 写 按钮 ， 即 可 删除 
一 个 采 蛙 项。 本 例 一 级 亲 单 设置 如 图 14-11 所 示 。 


图 14-11 弹出 式 末 单 设置 (1) 
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7 Dreamwealer C500H 守 M 相 Xa 总 与 简 高 字 名 | 教程 
Ba 
07， 胡 果 有 二 级 菜单 项 ， 则 按照 二 一步 的 方法 在 属性 面板 中 间 的 列表 框 中 添加 二 级 


菜单 项 。 同 理 ， 在 右边 的 列表 和 框 中 诬 加 三 级 染 单项 一 如 几 14-12 所 示 。 完 成 弹出 式 来 单 制 
作 后 ， 在 浏览 亏 中 把 光标 停留 在 热点 区 将 弹出 下 拉 菜 单 ， 如 图 14-13 所 示 。 


于 六 


图 14-12 弹出 式 末 单 设置 (2) 


08 自 选中 第 三 行 第 一 列 的 单元 格 , 然后 单 击 其 属性 面板 左上 角 的 眙 5 按钮 , 在 “ 目 


标 规则 ”下 拉 列 表 中 选择 “新 CSS 规则 ”并 单 击 “ 编 辑 规则 ”按钮 打开 “ 狐 建 CSS 规则 ” 
对 话 框 。 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “类 ”在 “选择 器 名 称 ” 文 本 框 中 键入 类 名 
称 ， 如 .backgroundl1,“ 规 则 定义 ”选择 “ 仅 限 该 文档 ” 然后 单 击 “ 和 确定 ” 投 钮 打开 对 应 
的 规则 定义 对 话 框 。 在 对 话 框 左 侧 的 “分 类 ”列表 中 选择 “背景 ” 然后 单 击 “背景 网 像 ” 
右 侧 的 “浏览 ”按钮 ， 在 弹出 的 资源 对 话 框 中 选择 喜欢 的 背景 图 片 。 单 击 “ 俏 定 ” 按 钮 关 
闭 对 话 框 ， 为 选 定 的 单元 格 设 置 背 景 图 像 。 再 右 击 单元 格 ， 从 弹出 的 上 下 亲 单 中 执行 “ 表 
格 ”|“ 拆 分 单元 格 ” 命 令 ， 把 单元 格 拆 分 为 五 行 ， 如 图 14-14 所 示 。 
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图 14-13 ”弹出 式 荣 单 效 果 图 14-14 ” 拆 分 单元 格 


09 光标 定位 在 上 步 拆 分 后 的 第 一 行 单 元 格 内 ， 然 后 执行 “插入 ”/“ 模 板 对 象 ”/ 
“可 编辑 区 域 ” 命令 , 弹出 一 个 对 话 框 , 提示 用 户 Dreamweaver 将 自动 把 文件 转 存 为 模板 。 
单 击 “确定 ” 弹出 “新 建 可 编辑 区 域 ” 对 话 框 ， 在 “名 称 ” 文 本 框 中 设置 可 编辑 区 域 的 
名 称 为 weather。 

10 选中 其 他 4 个 单元 格 ,， 在 属性 面板 上 设置 水 平 对 齐 方式 为 “ 左 对 齐 ” 垂直 对 齐 
方式 为 “居中 ” 然后 在 单元 格 内 插入 图 片 ， 并 且 调整 表格 到 合适 的 大 小 ， 效 末 如 网 14-15 
所 示 。 

11 选中 中 间 的 单元 格 ， 在 属性 面板 设置 其 背景 闫 色 为 #99CCCC， 宽 为 400 像素 ， 
单元 格 内 容 的 水 平 对 齐 方 式 为 “ 左 对 齐 ” 垂直 对 齐 方式 为 “顶端 ” 

12 光标 定位 在 中 间 单 元 格 内 ， 然 后 执行 “插入 ”/“ 模 板 对 象 ”/“ 可 编辑 区 域 ” 命 
令 ， 在 弹出 的 对 话 框 中 为 可 编辑 区 命名 show。 单 击 对 话 框 的 “确定 ”按钮 ， 插 入 可 编辑 
区 。 这 时 文档 效果 如 图 14-16 所 示 。 
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14-16 插入 可 编辑 区 
UL13 引 选中 表格 第 三 列 的 单元 格 ， 在 属性 设置 面板 上 设置 单元 格 内 容 的 水 平 对 齐 方式 


为 “居中 对 齐 ”， 和 圣 直 对 章 方式 为 “项 冰 ” 宽 为 200 像 系 ， 然 后 在 “目标 规则 ”下 拉 列 表 
中 选择 .background1， 设 置 单元 格 的 背景 图 像 。 

W149 执行“ 插入”/“ 表 格 ” 命 令 ， 在 第 三 列 的 单元 格 中 嵌 套 一 个 二 行 一 列 的 表格 ， 
表格 宽度 为 100%， 边 框 粗细 为 0， 表 格 名 称 为 妈 。 将 光标 定位 在 藤 套 表格 的 第 一 行 单 元 
格 中 ， 设 置 单元 格 高 度 为 161 像素 ， 然 后 新 建 CSS 规则 定义 表格 的 背景 图 像 ， 此 时 的 页 
面 效 果 如 图 14-17 所 示 。 

&L15 吕 单 击 “ 插 入 ” 栏 “ 常 用 ”标签 ， 然 后 单 击 “ 表 格 ” 按 钮 ， 在 单元 格 中 妖 套 一 个 
一 行 一 列 的 表格 ， 表 格 宽度 为 90%， 边 框 粗 细 为 0， 将 该 表格 命名 为 3。 
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f veo 256 怕 2ol 与 扩 高 实 介 才 生 导 


16， 选中 表格 如 ,在 属性 面板 下 的 “对 齐 下 拉 列 表 中 选择 “ 居 刘 对齐” 将 光标 定 


位 在 单元 格 中 ， 设 置 单元 格 内 容 水 平和 重 直 对 齐 方式 均 为 “居中 对 齐 ”， 并 在 表格 中 输入 
文本 ， 效 果 如 网 14-18 所 示 。 


14-17 设置 单元 格 背 景 图 像 14-18 插入 文本 


17， 选 中 嵌 套 表格 B， 执 行 “ 插 入 ”/“ 模 板 对 象 ”/“ 可 编辑 区 域 ”命令 ， 在 弹出 的 
对 话 框 中 给 可 编辑 区 域 合 名 为 news， 然 后 单 击 “ 人 确定 ” 控 钮 ， 插 入 可 编辑 区 域 。 
1 明 把 光标 定位 在 编辑 区 域内 ， 切 换 到 “代码 ”视图 ， 找 到 可 编辑 区 域 代码 ; 
<!-- TemplateBeginEditable name="news" --> 
<table width="90%" height="147" border="0" align="center"> 
<tr> 
<td><p> 北 京 - 上 海 。 机票 8 折 </p> 
<p> 北 京 -成 都 机 票 6 折 </p> 
<p> 北 京 - 杭 州 机 票 7 折 </p> 
<p> 北 京 - 武 夷 山 机票 9 折 </p></td> 
</tr> 
</table> 
<!-- TemplateEndEditable --> 
将 上 和 面 的 代码 修改 为 如 下 : 
<!-- TemplateBeginEditable name="news" --> 
<marquee behavior="scroll" direction="up" hspace="0" height="100" vspace="5" 
loop="-1" scrollamount="1" scrolldelay="100" > 
<table width="90%" height="147" border="0" align="center"> 
<tr> 
<td><p> 北 京 - 上 海 。 机 票 8 折 </p> 
<p> 北 京 - 成 都 。 机 票 6 折 </p> 
<p> 北 各- 杭州 机 票 7 折 </p> 
<p> 北 京 - 武 夷 山 机票 9 折 </p></td> 
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</tr> 
</table> 
</marquee> 
<!-- TemplateEndEditable --> 
完成 以 上 代码 插入 后 ， 文 档 效果 如 图 14-19 所 示 。 
” ”19 光标 定位 在 表格 忆 的 第 二 行 单元 格 中 ， 单 击 属性 面板 上 的 “ 拆 分 单元 格 ”按钮 
B35， 将 第 二 行 单元 格 拆 分 为 三 行 。 选 中 拆 分 后 的 第 一 行 单元 格 ， 设 置 单元 格 内 容 水 平 对 
齐 方式 为 “居中 对 齐 ”， 垩 直 对 章 方式 为 “顶端 ”， 然 后 输入 文本 “友情 链接 ”。 
20 选中 “友情 链接 ”四 个 字 ， 单 击 其 属性 面板 左上 角 的 始 呈 按钮 ， 在 “目标 规 
则 ”下 拉 列 表 中 选择 “新 CSS 规则 ”， 并 单 击 “ 编 辑 规则 ”按钮 打开 “新 建 CSS 规则 对 话 
框 ?。 在 “选择 器 闫 型 ”下 拉 列 表 中 选择 “类 ”， 在 “选择 器 名 称 ” 文 本 框 中 键入 类 名 称 ， 
如 .fontcolorl,“ 规 则 定义 ”选择 “ 仅 限 该 文档 ”， 然 后 单 击 “ 确 定 ” 按 钮 打开 对 应 的 规则 
定义 对 话 框 。 在 对 话 框 左 侧 的 “分 类 ”列表 中 选择 “类 型 ”， 然 后 设置 文本 的 字体 、 大 小 
和 颜色 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 为 选 定 的 文本 设置 字体 、 字 号 和 凑 色 等 属性 ， 然 
后 为 各 链接 项 设置 链接 地 址 。 提 示 ， 在 这 里 超级 链接 文本 是 绿色 的 (前 面 设置 页 面 属性 时 
设置 的 )。 完 成 本 步骤 后 的 效 末 如 图 14-20 所 示 。 


14-19 插入 跑马 灯 14-20 插入 “友情 链接 ” 


21 单 击 “ 插 入 ”/“HTML”/“ 水 平 线 ”菜单 命令 ， 插 入 水 平 线 ， 然 后 输入 “联系 
我 们 ” 栏 的 文本 内 容 ， 并 对 “联系 我 们 ”四 个 字 应 用 上 一 步 中 定义 的 CSS 规则 。 再 插入 
一 条 水 平 线 ， 然 后 输入 “我 们 的 服务 ”栏目 内 容 。 完 成 本 步骤 后 的 效果 如 图 14-21 所 示 。 

22 将 光标 定位 在 页 面 布 局 表格 的 最 后 一 行 中 ， 例 如 页 面 左 侧 的 最 后 一 张 图 片 所 在 
的 单元 格 中 ， 然 后 打开 “布局 ”插入 面板 ， 单 击 “ 在 下 面 插入 行 ”按钮 骂 ， 添 加 一 行 。 
和 23 将 光标 定位 在 上 一 步 添加 的 行 中 ， 设 置 单元 格 内 容 水 平 “ 居 中 对 齐 ”， 垂 吉 对 齐 
方式 为 “顶端 ” 然后 输入 厂 权 等 信息 。 选 中 “webmaster@sina.com”， 在 属性 面板 设置 其 

“链接 ”属性 为 “mailto: comeysoft@sina.com”， 效 果 如 图 14-22 所 示 。 
接 下 来 将 为 经 常 改变 的 天 气 信息 和 “最 新 消息 ”内 容 制 作成 库 项 日 。 
24 有 刚 除 可 编辑 区 域 weather 中 的 默认 文本 ， 然 后 输入 天 气 文本 ， 如 图 14-23 所 示 。 
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14-21 插入 文本 


联系 起 位 


披 权 阶 有 ，Copynght ComeySodt 2012 
建议 使 用 浏 语 器 下 $0 以 上 , 屏幕 分 辩 率 1024x768 
Em we trarermiina con 


14-22 插入“ 版权” 等 信息 


昌 25 有 选中 上 一 步 输入 的 文本 ， 执 行 “ 修 改 ”/“ 库 ” /“ 增 加 对 象 到 库 ” 命 令 。 此 时 在 
“ 库 ” 面 板 中 自动 新 建 一 个 库 项 目 ， 输 入 库 项 目 名 称 weather， 如 图 14-24 所 示 。 

26 用 同样 办 法 把 “最 新 消息 ”内 容 制作 成 库 项 目 文件 news.lbi。 

27 保存 模板 文件 为 “lvyou.dwt”( 应 该 养 成 及 时 保存 文件 的 习惯 ,以 免 因 电脑 故障 
而 丢失 辛勤 工作 的 成 果 )， 至 此 模板 制作 完毕 。 切 换 到 文件 管理 面板 ， 会 发 现 站 点 中 已 自 
动 增加 了 Templates、Library 和 SpryAssets 三 个 文件 来， 如 图 14-25 所 示 。 

创建 的 模板 文件 和 库 文件 分 别 存放 于 Templates 和 Library 两 个 文件 夹 内 ，SpryAssets 
文件 夹 内 放置 创建 Spry 菜单 栏 时 自动 生成 的 样式 文件 。 按 F12 功能 键 预览 模板 文件 的 效 
果 如 图 14-26 所 示 。 
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参 Dreomweaper 一 主 hb 实例 最 硒 必 
14.4 制作 首页 、 4 


制作 好 模板 后 ， 制 作 网 页 束 成 为 轻 而 多 举 的 事情 了 。 制 作 本 站 首页 执行 以 下 步 又: 

DD. 启动 Dreamweaver CS6， 在 “ 产 建 文档” 对 话 杠 中 单 击 “模板 中 的 页 ” 选择 站 
点 lVvyou， 选 中 刚才 创建 的 模板 文件 “lvyou.dwt”， 如 图 14-27 所 示 。 

和 02 是 单 击 “ 创 建 ”按钮 ， 进 入 文档 窗口 ， 如 图 14-28 所 示 。 只 有 weather、show 和 
news 可 编辑 区 可 以 输入 内 容 。 其 中 黄 羚 色 加 亮 的 部 分 为 库 项 目 ， 可 以 通过 修改 库 项 目 文 
件 实现 对 其 内 容 的 编辑 。 
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14-27 “从 模板 创建 ”对 话 框 14-28 ”新 文档 效 末 


和 03 有 执行 “修改 ”/“ 页 面 属性 ”/“ 标 题 /编码 ”命令 设 定 新 页 面 属性 ，“ 标 题 ” 栏 输 
入 “ 禄 意 旅游 网 ”。 

04 上 删除 show 可 编辑 区 内 的 “show” 文 本 ， 然 后 输入 首页 内 容 ， 并 设置 文本 和 图 
像 格式 ， 最 终 得 到 效果 如 图 14-29 所 示 。 
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14-29 ”首页 效果 
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&o5) 保存 文件 为 “index.html”， 完 成 未 页 制作 ， 


14.5 制作 其 他 页 面 


制作 其 他 页 面 步骤 与 首页 的 制作 完全 相同 , 在 此 不 再 次 述 。 图 14-30 是 在 “制作 首页 ” 
的 第 四 步 又 中 输入 “武夷 山 概 况 ” 内 容 后 的 负面 效 果 。 制 作 完 后 你 存 为 “武夷 山 .html” 文 
人 


版 板 所 有 : Copyrnght ComeySoft 2012 
建议 使 用 浏览 器 正 5.0 以 上 , 屏幕 分 辩 率 1024x768 


Email: webrmaster(@sina. Com 


14-30 页 面 “wuyishan.html” 效 果 
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15.1 实例 效果 


本 例 的 最 终 效 果 如 图 15-1 一 图 15-3 所 示 。 
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后 师 生 风采 PwV oe moe 4 
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9 我 给 孩子 们 讲 故事 
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户外 活动 
日 幼儿 园 家 长 学 校 工作 计划 文艺 演出 
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苞 本 人 
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图 15-1 首页 效 朱 
将 足 标 指针 移 到 导航 荣 单 上 时 ， 荣 单项 显示 为 村 红色 ， 并 弹出 下 拉 沫 单 。 移 到 链接 文 
本 上 ， 则 文本 颜色 变 为 桔 红 色 ， 并 显示 下 划 线 。 
页 面 奔 部 的 图 厂 向 右 深 动 ， 当 将 鼠标 指针 移 到 图 片上 时 ， 图 片 停止 深 动 ; 移 开 忌 标 ， 
则 图 片 继续 深 动 。 
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® | p | DrearRERREREC26 中 文 版 入 门 与 提高 实例 新 在 
本 例 中 的 页 面 布 局 相同 ， 个 信 怎 页 面 如 图 15-2 所 示 。 左 侧 显 示 栏 目 子 
标题 ， 页 面 右 侧 区 域 显 示 详 细 的 信息 列表 。 单 击 链接 文本 ， 可 以 在 类 似 的 页 面 中 打开 链接 


目标 文件 。 


一 


首页 | 宝宝 学 园 | 亲子 资源 | 师 生 风采 | 父母 课堂 | 成 长 天 地 | 咨询 留言 | 友情 链接 | 联系 我 们 
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过 议 贰 用 济 % 时 DE 


De 


图 15-2 ”首页 效果 


图 15-3 所 示 的 页 面 是 一 个 信息 有 反馈 负面。 无 侧 显 示 栏 目 子 标题 ， 页 面 右 侧 区 域 显 示 一 
个 表单 。 表 单项 采用 Spry 验 证 构件 制作 ， 当 输入 的 信息 不 满足 要 求 ， 则 提 区 表单 时 会 显示 
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请 选择 一 个 主题 Y 
联系 电话 
sm 
本 


4 Ts a Viv1il23 B11 I re, 


图 15-3 "页面 效果 
15.2 创建 站 点 


对 网 站 进行 仔细 规划 之 后 ， 束 需要 收集 、 制 作 需 要 的 站 点 资源 了 ， 如 LOGO、 导 航 条 
背景 、 图 片 等 ， 并 为 这 些 素材 建立 相应 的 文件 夹 目 录 。 这 些 准 备 工作 完毕 之 后 ， 接 下 来 就 
可 以 构建 站 点 了 。 本 节 将 这 些 已 有 的 文件 夹 组 织 为 一 个 站 点 ， 步 又 如 下 : 

启动 Dreamweaver CS6， 执 行 “ 站 点 ”/“ 管 理 站 点 ”/“ 狐 建 ” 人 命令， 打开 “站 
点 设置 ”对 话 框 。 

和 02D 在 弹出 的 “站 点 设置 ”对 话 框 中 设置 站 点 名 称 为 education， 然 后 指定 本 地 站 点 
文件 夹 的 路 径 C:NImetpub\wwwrooteducation\。 

4003 有 1 单 击 “高 级 设置 ”选项 卡 ， 然 后 在 其 子 菜单 中 选择 “本 地 信息 罗 ， 在 打开 的 屏 
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19 DrecERRER LS56 中 六 有 般 入 门 与 提高 实例 箱 E 


项 中 设置 “默认 网 像 文件 夹 “为 cNinetpub\educatiomNimages\。 
04 在 “链接 相对 于 ”区 域 ， 选 择 “ 文 档 ” 选 项 。 
05 在 “Web URL” 后 的 文本 框 中 输入 http://localhost/education/。 
06 9 单 击 对 话 框 中 的 “保存 ”按钮 ， 返 回 “ 站 点 设置 ”对 话 框 。 再 次 单 击 “ 傈 存 ” 
按钮 ， 返 回 “ 站 点 管理 ”对 话 框 ， 这 时 对 话 框 里 列 出 了 刚刚 创建 的 本 地 站 点 。 
将 文件 夹 目 录 结 构 组 织 为 站 点 后 ， 即 可 以 将 磁盘 上 现 有 的 文档 组 织 当 作 本 地 站 点 来 打 
天 ; 便于 以 后 外 一 生理 。 


15.3 制作 素材 


在 正式 制作 网 页 之 前 ， 需 要 先 制作 网 页 中 要 用 a 到 的 图 片 、 图 标 、 动 画 、 声 首 或 视频 等 
素材 。 本 实例 中 用 到 的 素材 制作 傈 单 ， 本 书 不 进行 详细 介绍 ， 主 要 介绍 一 下 制作 弹出 菜单 
和 标题 动画 的 操作 步骤 。 


15.3.1 制作 弹出 菜单 


在 本 例 的 导航 菜单 制作 步骤 如 下 ， 

0 让 启动 Fireworks， 执 行 “文件 /“ 新 建 ”命令 ， 在 “新 建文 档 ” 对 话 框 中 ,将 “ 夯 
布 大 小 ”设置 为 680 像 素 X50 像 素 ， 夯 布 颜色 设置 为 透明 。 

03 在 绘图 工具 箱 中 选择 文本 工具 ， 并 在 属性 面板 上 设置 字体 为 宋体 ， 大 小 为 14， 
文本 颜色 为 黑色 ， 

03] 在 画布 上 输入 导航 菜单 文本 ， 并 通过 属性 设置 面板 使 其 水 平分 布 ， 刚 好 布 满 下 
个 文档 ， 效 果 如 图 15-4 所 示 ， 


首页 | 宝宝 学 园 | 亲子 资源 | 师 生 风采 | 父母 学 党 | 成 长 天 地 | 咨询 留言 | 友情 链接 | 联系 我 们 


图 15-4 ”设置 按钮 的 文本 标签 


04 在 绘图 工具 箱 中 选择 切片 工具 ， 在 导航 文字 上 深 加 切 刻 ， 如 图 15-$ 所 示 。 


图 15-5 ”为 导航 文字 添加 切片 


05 用 选中 页 面 上 的 所 有 对 象 并 复制 ， 然 后 打开 “状态 ”面板 ， 单 击 面 板 确 部 的 “ 独 建 
/ 重 制 状态 ”图 标 按钮 ， 新 建 一 个 状态 ， 并 执行 “编辑 ”/“ 粘 贴 ” 命 令 ， 将 状态 1 的 内 容 粘 
贴 到 状态 2 中 。 

06 在 绘图 工具 箱 中 选择 文本 工具 ， 选 中 状态 2 中 的 文本 ， 然 后 在 属性 面板 上 将 文字 
颜色 修改 为 棒 红 色 。 

0 组 返回 状态 1， 选 中 第 一 个 切片 对 象 ， 在 切片 上 单 击 鼠 标 右 键 ， 然 后 在 弹出 的 上 下 
文 亲 单 中 选择 “添加 交换 图 像 行为 ”命令 ， 弹 出 图 15-6 所 示 的 对 话 框 。 

08 在 对 话 框 至 主角 的 列表 框 右 侧 单 击 要 添加 行为 的 切 上 请 位置， 然后 选中 “状态 纺 
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号 ” 按 乌 ， 并 在 其 右 侧 的 下 拉 列表 中 选 据 “ 状 态 2”。 


当 滑 过 当前 切片 时 ， 变换 以 下 所 选 切 片 中 的 一 幅 图 像 他): 


mermu rl cl2 人 
mermu rl _ cl2 EE 
me rl _ cl4 
merm rl cl4 
merw rl _clB 
merwu rl_clBb 
mermu rl _cl8 
merwu rl cl8 


nemrlc? Bs 


谈 换 图 像 显示 自 : 

加 状态 编号 如 :状态 2 
〇 图 像 交 件 多 ):| 
预先 载 入 图像 全 ) 
鼠标 称 开 时 复原 图 像 外 ) 

Rr 摘 三 中 的 图 黎 ， 开 灾 趟 二 


图 15-6 “交换 图 像 ” 对 话 框 


09 9 单 击 “确定 ”按钮 天 财 对 话 框 。 打 开 “ 行 为 ”和 面板 ， 为 行为 指定 触发 事件 。 本 
例 使 用 默认 设置 ， 妈 QnMouseOve。 

10 1 按照 第 L07 ~M.09 步 的 操作 方法 为 其 他 切片 添加 交换 图 像 行 为 和 触发 事件 。 

为 切片 添加 交换 网 像 行 为 之 后 ， 在 浏览 器 中 将 鼠标 指针 移 到 黑色 的 导航 文字 上 时 ， 文 
本 显示 为 梢 红色 。 

11 旧 选中 一 个 切片 对 象 ， 例 如 “宝宝 学 园 ”， 在 切片 对 象 上 单 击 鼠标 右键 ， 在 弹出 
的 上 下 文 亲 单 中 选择 “添加 弹出 末 单 ”行为 。 

12 旧 在 “弹出 来 单 编 辑 问 ”对 话 框 的 “内 容 ” 页 和 面 ， 添 加 二 级 或 二 级 以 上 子 菜单 项 ， 
并 为 沫 单项 指定 链接 目标 ， 以 及 目标 文件 打开 的 方式 。 

13 汪 单 击 “继续 ”按钮 切换 到 “外 观 ” 页 面 ， 设 置 末 单 类 型 为 焉 直 亲 单 ， 了 字体 为 宋 
体 ， 大 小 为 14， 文 本 在 单元 格 中 的 对 章 方式 为 后 中 对 齐 ， 弹 起 状态 的 文本 颜色 为 黑色 ， 单 
元 格 背 景 闫 色 为 日 色 ， 滑 过 状态 的 文本 颜色 为 白色 ， 单 元 格 育 景 闫 色 为 桔 红 色 。 

14 单 击 “继续 ”按钮 切换 到 “局 级 ”页 面 ， 设 置 单元 格 边 中 为 $3， 边框 宽度 为 1， 
边框 闫 色 为 膨 色 ， 阴 影 为 深交 色 ， 噩 沈 为 浅 灰 色 。 

15 9 单 击 “继续 ”按钮 切换 到 “位 置 ” 页 耐 ， 设 置 采 单位 置 为 切片 的 搬 部 ， 子 末 单 
位 置 为 沫 单 的 右 下 部 ， 然 后 单 击 “ 完 成 ”按钮 关闭 对 话 框 。 打 开 “ 行 为 ”面板 ， 为 添加 弹 
出 荣 单行 为 指定 触发 事件 为 OnMouseOver， 此 时 男 布 上 的 对 象 如 图 1S-7 所 示 。 


首页 | 织 客 洲 园 | | 亲子 资源 | 师 生 风 采 | | | 父母 学 堂 | | | 成 长 天 地 | | | 咨询 留言 | 友情 链接 | | | 联系 我 们 


图 15-7 “添加 弹出 末 单 ”行为 的 效果 


16 按照 与 第 由 11 ~ 内 15 卓 步 关 似 的 方法 编辑 几 个 切记 的 弹出 荣 羊 。 编 辑 完 半 按 F12 
键 可 以 在 浏览 右 中 预 宽 弹 出 亲 时 的 效 米 。 
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19 Dreomwearer oo6 中 立 豚 入 门 己 提 高 实例 趣 碍 


17 执行 “窗口 ”/“ 优 化 ”命令 ， 在 “优化 ”面板 的 “设置 ”下 拉 列 表 框 中 选择 “GIF 
最 合适 256”。 

18 执行 “文件 ”/“ 导 出 ”人 命令， 在“ 导出” 对话 框 内 输入 文件 名 menu， 保 存 类 型 
为 HTML 和 图 像 ， 导 出 切 厂 ， 包 括 无 切片 区 域 。 所 有 文件 均 存 放 于 站 点 的 images 目 录 下 。 

19 设置 完毕 ， 单 击 “ 你 存 ” 按 钮 ， 弹 出 末 单 制作 完毕 。 在 制作 网 页 时 ， 可 将 导出 
的 HTML 文件 应 用 于 Dreamweaver 中 。 


15.3.2 制作 标题 动画 


制作 标题 动画 放置 在 页 面 的 顶端 作为 Jogo， 其 体 步 又 如 下 : 

0 信 局 动 Flash， 执 行 “ 文 件 ”/“ 新 建 ” 命 令 ， 创 建 一 个 空白 的 FLA 文 档 。 

02 9 执行 “修改 ”A 文档 ”命令 ,在 弹出 的 对 话 框 中 将 影片 尺寸 设置 为 1020px X 1200px， 
背景 闫 色 为 #FFCA21。 

03 执行 “文件 ”/“ 导 入 ”/“ 导 入 到 舞台 ”命令 ， 在 舞台 上 导入 一 幅 背 景 狗 片 。 选 
中 背景 图 片 ， 在 属性 面板 上 设置 其 左上 角 与 舞台 左上 角 对 齐 。 

04 新 建 一 个 网 层 ， 在 岁 层 的 第 1 帧 导入 一 幅 位 网， 然后 将 导入 的 位 图 移 到 背景 岁 所 
的 右 下 方 ， 效 果 如 图 15-8 所 示 。 


图 15-8 ”图 像 效 果 


05 9 按 下 Shift 键 的 同时 ， 单 击 选中 图 层 1 和 图 层 2 的 第 80 帧 ,然后 单 击 耻 标 右键 ,在 弹 
出 的 上 下 文 末 单 中 选择 “插入 帧 ”命令 ， 将 狂人 背景 延续 到 第 80 帧 。 

06 新 建 一 个 图 层 ， 在 绘图 工具 箱 中 选择 多 角 星 形 工具 ， 并 打开 属性 面板 ， 设 置 笔 
触 凑 色 无 ， 单 击 “ 选 项 ”按钮 ， 在 弹出 的 对 话 框 中 设置 闫 型 为 “ 星 形 ”， 边 数 为 5。 然后 
在 舞台 上 绘制 一 个 五 攻 星 形 。 

07 昌 选中 星 形 ， 将 其 拖 放 到 舞台 右 侧 的 工作 区 中 ， 然 后 打开 “颜色 ”面板 ， 设 置顶 
充 关 型 为 “ 径 同 渐变”， 将 第 一 个 颜色 洲 标 修改 为 红色 ， 第 二 个 凑 色 话 标 修改 为 黄色 。 

0 四 在 第 20 帧 单 击 鼠 标 右键 ， 从 弹出 的 上 下 文 菜单 中 选择 “转换 为 关键 帧 ”命令 。 
帮 中 绘 几 工 具 箱 中 的 文本 工具 ， 设 置 文本 类 型 为 静态 文本 ， 在 舞 合 上 输入 文字 “ 杀 ”。 

09 选中 文本 ,执行 “修改 ”/“ 分 离 ” 命 令 ， 将 文本 打 禹 。 然 后 打开 “ 闫 色 ” 和 面板 ， 
设置 填充 类 型 为 “ 径 问 渐变 ”， “颜色 ”面板 将 保留 上 一 次 设置 的 渐变 色 。 质 充 文字 之 
后 ， 删 除 舞 人 台 上 的 星 形 。 

10 在 第 1 帧 和 第 20 帧 之 间 的 任意 一 帆 上 单 击 鼠 标 右键 ， 从 弹出 的 上 下 文 某 单 中 选择 
“创建 补 间 形 状 ” 命 令 ， 创 建 形 状 渐变 动画 。 

单 击 时 间 轴 面板 撒 部 的 “ 绘 独 纸 外 观 ” 投 钮 ， 可 以 得 看 动画 效 末 ， 如 网 15-9 所 示 。 
292 


图 15-9 ”形状 补 间 动 画 的 洋 答 谈 效 打 


14 昌 新 建 一 个 网 层 。 选 中 新 图 层 的 第 21 帧 ， 单 击 鼠 标 右键 ， 从 弹出 的 上 下 文 菜单 中 
选择 “插入 关键 帆 ” 命 令 ， 然 后 选择 多 角 星 形 工 具 ， 在 舞台 上 绘制 一 个 五 角 星 形 。 

UL12 肯 选中 星 形 ， 将 其 拖 放 到 舞台 右 侧 的 工作 区 中 ， 然 后 打开 “颜色 ”面板 ， 设 置 填 
充 类 型 为 “ 径 问 渐变 ”， 将 第 一 个 闫 色 游标 修改 为 贡 色 ， 第 二 个 闫 色 洲 标 修改 为 绿色 。 

13 在 第 40 帧 单 击 鼠 标 右键 ， 从 弹出 的 上 下 文 菜 单 中 选择 “转换 为 关键 帧 ”命令 。 
选中 绘图 工具 箱 中 的 文本 工具 ， 设 置 文本 关 型 为 豆 态 文本 ， 在 舞台 上 输入 文字 “ 杀 ”。 

UL14 具 选中 文本 ， 执 行 “ 修 改 ”/“ 分 离 ” 命 令 ， 将 文本 打 散 ， 然 后 打开 “颜色 ”面板 ， 
设置 填充 渐变 色 为 黄 绿 色 径 同 渐 变 ， 然 后 删除 舞 合 上 的 星 形 。 

159 在 第 21 帧 和 党 40 帧 之 间 的 任意 一 帆 上 单 击 鼠 标 右键 ， 从 弹出 的 上 下 文 末 单 中 选 
择 “ 创 建 补 间 形状 ”命令 ， 创 建 形状 渐变 动画 。 

16 按照 以 上 方法 ， 再 新 建 两 个 图 层 ， 分 列 制作 “ 宇 ” 和 “ 贝 ” 的 形状 渐变 动画 。 
为 实现 文字 依次 出 现 的 效 末 ，“ 军 ”的 补 间 范围 为 第 41 帧 到 第 60 帧 ，“ 册 ”的 补 间 范围 为 
第 61 帧 到 第 80 帧 。 制 作 完成 后 的 动画 最 后 一 帧 和 时 间 轴 如 图 15-10 所 示 。 


| | 鞋 让 二 厂 一 | [所 1 -EE 
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图 15-10 ”动画 最 后 一 帧 及 时 间 轴 效果 
17 执行 “文件 ”/“ 发 布设 车” 有 亲 单 命令 ， 在 弹出 的 对 话 框 中 单 击 《Flash” 选 项 卡 ， 
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19 DrecERRER LS56 中 六 有 般 入 门 与 提高 实例 箱 E 


在 对 应 的 页 面 中 将 JPEG 品 质 议 为 80， 导 出 版 本 为 Elash Player 10， 然 后 单 击 “ 了 确定” 按钮 
关闭 对 话 框 。 
18 执行 “文件 ”A 导出 影片 ”命令 , 在 弹出 的 对 话 框 中 设置 文件 的 保存 类 型 为 “SWF 
影片 (*.swf) ”， 文 件 名 称 为 logo.swf，， 你 存 位 置 为 C:\Inetpub\education\multimedia。 
19 执行 “文件 ”/“ 保 存 ” 命 令 ， 将 源 文档 保存 为 logo.fla。 


15.4 制作 页 面 布局 模板 


本 例 网 站 中 的 网 页 页 面 风格 一 人 性 ， 因 此 考虑 首先 制作 一 个 模板 文件 ， 创 建 负 和 面 的 整体 
布局 ， 然 后 基于 该 模板 生成 员 面 文件 。 由 于 本 网 站 的 首页 布局 与 其 他 页 面 有 所 不 同 ， 因 此 
本 草 将 在 最 后 单独 介绍 。 

制作 页 面 布局 模板 之 前 ， 首 先 制作 库 项 目 。 


15.4.1 制作 库 项 目 


本 例 中 制作 的 库 项 目 主 要 是 版 权 声 明 ， 具 体制 作 步 又 如 下 : 

01 局 动 Dreamweaver CS6， 选 择 “ 窗 口 ”/“ 文 件 ” 命 令 ， 打开 “文件 ”和 面板 。 

02 在 “文件 ”和 面板 左上 角 的 站 点 下 拉 列 表 中 选择 站 点 education， 并 将 站 点 视图 设 
置 为 “本 地 视图 ”。 

03 打开 “ 库 ” 和 面板 ， 单 击 面 板 故 部 的 “新 建 库 项 目 ” 按 钮 ， 输 入 库 项 目的 名 称 ， 
然后 单 击 文 档 窗口 中 的 其 他 区 域 。 

04 9 双击 库 项 目 名 称 ， 在 文档 窗口 中 打开 ， 然 后 在 页 面 中 插入 一 个 三 行 一 列 的 表格 ， 
表格 宽度 为 100%。 

05 选中 表格 中 的 单元 格 , 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 章 和 王 直 对 齐 方式 
均 为 居中 ， 然 后 在 表格 中 输入 文本 ， 如 图 15-11 所 示 。 


CO 


Ooooeeeoeeeeereeeee ee ee 00 0 0 0 0 0 0 e000 00000 0.00 


图 15-11 库 文 件 


06 选中 版 本 声明 中 的 邮箱 链接 文本 ， 在 属性 面板 上 的 链接 文本 框 中 输 
入 mailto:vivi123@123.com.cn， 创 建 邮件 链接 。 
07 关闭 库 项 目 编辑 窗口 。 
此 时 ， 即 可 在 库 面 板 中 的 库 项 目 列表 中 看 到 已 创建 的 库 项 目 了 。 
接 下 来 制作 页 面 布局 模板 。 


15. 4. 2 制作 模板 
本 例 制 作 页 面 布局 模板 的 具体 操作 步骤 如 下 : 
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01 局 动 Dreamweaver CS6， 和 选择 “窗口 ”/“ 注 件 ” 命 令 ， 打 开 “ 文 件 ” 面 板 。 

02 在 “文件 ”和 面板 左上 角 的 站 点 下 拉 列 表 中 选择 站 点 education， 并 将 站 点 视图 设 
置 为 “本 地 视图 ”。 

03 在 “文件 ”面板 中 单 击 鼠标 右键 ， 在 弹出 的 上 下 文 沫 单 中 选择 “新 建文 件 ” 命 
令 ， 在 当前 站 点 中 狐 建 一 个 HITML 文 件 ， 输 入 文件 名 称 后 按 Enter 键 ， 或 单 击 文档 窗口 其 他 
区 域 ， 然 后 在 “文件 ”面板 中 双击 独创 建 的 文件 ， 在 文档 窗口 中 打开 该 文件 。 

04 执行 “修改 ”/“ 页 面 属 性 ”命令 ， 在 弹出 的 对 话 杠 中 设置 字体 为 宋体 ， 大 小 为 
14， 凑 色 为 黑色 ， 背 景 颜 色 为 #FEFCA21， 切 换 到 “链接 ”页 面 ， 设 置 所 有 链接 颜色 均 为 黑 
色 ， 链 接 文字 大 小 为 14， 且 始终 无 下 划 线 ， 然 后 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

05 在 “第 用 ”和 面板 中 单 击 表 格 图 标 , 在 弹出 的 对 话 框 中 设置 表格 行 数 为 1， 列 数 为 1， 
表格 宽度 为 100%， 边 框 粗细 为 0， 单 元 格 边 距 和 间距 都 为 0， 无 标题 ， 然 后 单 击 “确定 ” 按 
钮 ， 在 页 面 中 插入 一 个 一 行 一 列 的 表格 。 

06 选中 表格 ， 在 属性 面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “居中 ”， 然 后 将 光标 定 
位 在 单元 格 中 ， 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 章 方式 为 后 中 ， 垂 和 直 对 齐 方式 为 项 
症 。 

07 将 光标 定位 在 单元 格 中 ， 单 击 “ 和 常用 ”和 面板 上 的 媒体 图 标 按钮 ， 在 弹出 的 下 拉 
玉里 中 选择 “媒体 SWF” 命令 ， 在 单元 格 中 插入 上 一 市 中 制作 好 的 标题 动画 。 确 保 选 中 
“循环 ”和 “ 目 动 播放 ” 复 选 框 。 

08 将 鼠标 指针 定位 在 Flash 对 象 押 在 的 表格 右 侧 ， 按 下 键 熏 上 的 Shift+Enter 组 合 键 ， 
插入 一 个 软 回 车 。 在 “常用 ”面板 中 单 击 表格 图 标 ， 在 弹出 的 对 话 框 中 设置 表格 行 数 为 4， 

列 数 为 2， 表 格 宽度 为 872 人 像素， 边框 粗细 为 0， 单 元 格 边 距 和 间距 都 为 0， 无 标题 ， 然 后 单 
击 “ 确 定 ” 按 钮 ， 在 页 面 中 插入 一 个 四 行 二 列 的 表格 。 

09 选中 表格 ， 在 属性 面板 上 指定 ID 为 main。 将 光标 定位 在 第 一 行 单元 格 中 ， 单 击 
属性 面板 上 的 合并 单元 格 按钮 ， 在 弹出 的 对 话 框 中 将 第 一 行 单 元 格 合并 为 一 列 ， 然 后 在 属 
性 面板 上 设置 单元 格 内 容 的 水 平 对 齐 方式 和 王 百 对 齐 方 了 式 均 为 后 中 。 

接 下 来 为 第 一 行 的 单元 格 新 建 CSS 规 则 ， 指 定单 元 格 育 景 图 像 。 

10 在 属性 面板 上 单 击 “ 编 辑 规则 ”按钮 , 在 弹出 的 对 话 框 中 设置 选择 器 类 型 为 “类”， 
选择 右 名 称 为 .boximg， 规 则 定义 的 位 置 为 “新 建 样式 表 ”， 然 后 单 击 “ 人 确定” 按钮， 在 强 
出 的 对 话 框 中 将 样式 表 命 名 为 link.css， 且 保存 在 当 醒 站 点 根 目 录 之 下 。 

11 9 在 弹出 的 规则 定义 对 话 框 中 ， 单 击 左 侧 分 类 列表 中 的 “背景 ”， 然 后 在 对 应 的 
页 面 中 单 击 “ 浏 吃 ” 按 钮 定位 到 需要 的 背景 图 像 。 单 击 “ 应 用 ”和 “确定 ”按钮 天 财 对 话 
框 。 

此 时 ， 指 定单 元 格 中 已 应 用 指定 的 背景 图 像 。 


12 将 光标 移 到 上 一 步 定义 背景 图 像 的 单元 格 中 ， 选 择 “ 插 入 ”/“ 图 像 对 象 ”/ 


“Fireworks HTML ”人 命令， 打开 “插入 Fireworks HTML” 对 话 杠 。 单 击 “ 浏 览 ” 按 钮 ， 定 
位 到 14.2.1 方 制作 的 弹出 末 单 ， 蛙 击 “ 确 定 ” 按 钮 ， 即 可 插入 弹出 亲 单 。 当 前 页 面 在 实时 
视图 中 的 效果 如 图 15-12 所 示 。 

当 将 忌 标 指针 移 到 导航 文字 上 时 ， 显 示 弹 出 式 菜 单 ， 且 文本 将 显示 为 桔 红 色 ， 效 果 如 
图 15-13 所 示 。 
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加 加 术 几 一 贡 ST 总 


图 15-12 页面 效果 


国 呈 一 一 一 -一 a s J 赐 
<body><tabley<tbody><tr>Ktdy 1 回 男 恩 720x396v 154 K /4 秒 Unicode (UTF-8) ..: 


图 15-13 页面 效果 

和 13 了 将 光标 定位 在 第 a 列 单元 格 中 ， 在 属性 面板 上 设置 单元 格 宽度 为 291 像 
素 ， 然 后 将 该 单元 格 拆 分 为 二 

> 将 其 拆 分 为 三 列 。 将 拆 分 后 的 第 二 列 单元 
格 拆 4 eh 此 时 的 页 和 面 布局 如 图 15-14 所 示 。 

寻 15 选中 单元 格 ， 在 属性 面板 上 设置 单元 格 内 容 水 平 对 齐 方式 为 左 对 齐 ， 重 直 对 齐 
方式 为 顶端 ， 然 后 在 第 一 行 单元 格 中 插入 图 像 。 同 理 ， 在 第 二 行 第 一 列 和 第 二 行 第 三 列 的 
单元 格 中 插入 图 像 。 

ER16) 选中 第 二 列 单元 格 ， 分 别 在 第 一 行 单元 格 和 第 三 行 的 单元 格 中 插入 图 像 。 新 建 
一 个 CSS 规 则 ， 定 义 第 二 行 的 单元 格 的 背景 图 像 ， 且 设置 第 二 行 单元 格 的 高 度 为 122 像 素 ， 
然后 在 第 四 行 单元 格 插入 图 像 ， 此 时 的 页 面 效果 如 图 15-15 所 示 。 

U17) 将 光标 定位 在 表格 main 的 第 三 行 单元 格 中 , 单 击 属性 面板 上 的 合并 单元 格 按钮 ， 
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将 最 后 一 行 单元 格 合并 为 一 列 ， 设 置 时 元 格 内 容 水 平 左 对 章 ， 王 和 直 顶 端 对 章 ， 然 后 插入 图 
像 。 


[ 
旷 C:\Inetpub\wwroot\education\indezd. html (XHTHL)* = el 


ia menu.css linkD.css*t swfobject modified. js mm_css menu. js 宁 
从 


291 [155) 


名 T | > 
<bodvy> <tabl emnain> <tr 3Ktdd [NR] 洒 QQ ll00% vy| 回转 [| T4T x 369 119K73 秒 Unicode (UTF-8) 


图 15-14 ”页 面 效 来 


面 
旷 wntitlead-! (xmt)y 加 区 


QA menu css swfobject modified. js link.css mm_css menu. js 人 


本 而 四 
<ody>《<tabley<tr>Ktd [RD QQ lo0% ~v| 回回 | 720 x 398v 170 kK/ 4 秒 Unicode (UTF-8) 


图 15-15 ”页 面 效 来 


18 将 光标 定位 在 表格 main 的 最 后 一 行 单元 格 中 ， 单 击 属 性 面板 上 的 合并 单元 格 鬼 
钮 ， 将 最 后 一 行 单元 格 合并 为 一 列 ， 并 在 属性 面板 上 设置 单元 格 内 容 水 平 对 章 方式 和 垂直 
对 章 方式 均 为 居中 ， 局 度 为 90。 

19 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 “新 CSS 规 则 ”, 单 击 “ 编 辑 规则 ” 
按钮 ,在 弹出 的 对 话 框 中 指定 选择 天 类 型 为 “类 ”, 规则 定义 在 link.css 样 式 表 中 。 单 击 “ 确 
定 ” 按 钮 ， 在 弹出 的 对 话 框 中 设置 单元 格 的 肯 景 图 像 。 

20， 将 光标 定位 在 上 一 步 设置 育 景 冬 像 的 单元 格 中 ， 然 后 在 库 面 板 中 选中 创建 的 版 
权 声 明 库 项 目 ， 单 击 面板 底部 的 “插入 ”按钮 ， 将 库 项 目 谎 加 到 页 面 中 。 此 时 的 页 面 效 琳 
如 图 15-16 所 示 。 

接 下 来 制作 第 二 列 的 内 容 。 
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: 画 弄 漆 贱 二、 塌 51 洲 


4 gi 中 文 版 入 门 与 提高 实例 着 脾 


21 将 光标 定位 在 第 二 列 里 元 格 中 ， 人 设置 单元 格 背 景 闫 色 为 白色 ， 水 平 对 并 方式 为 
左 对 齐 ， 垩 直 对 齐 方 式 为 项 剖 。 


国 c:\inetpub\wwroot\education\indez0. html (XHTHL)* [sl 


E 


menu. css swfobject modified. ]s mm_css_m 


erm. ]5 


>13 


和 


山 | | 
bodv> <tabl emainy <tr> <td> [RS] 现 区 [oo ~v| 回 贺 | 747 x 369 |149 K /4 秒 Unicode (UTF-8)| :| 


图 15-16 插入 库 项 目的 页 面 效果 


22 执行 “插入 ”/“ 表 格 ” 命 令 ， 插 入 一 个 2 行 3 列 的 表格 ， 表 格 宽度 为 581 像 素 ， 边 
框 、 单 元 格 需 充 和 间距 均 为 0。 

23 有 睛 选中 第 一 行 的 三 列 单元 格 ， 单 击 属性 面板 上 的 合并 单元 格 按钮 ,将 第 一 行 的 单元 
格 合并 为 一 行 一 列 ， 并 设置 单元 格 的 高 度 为 $8。 

24 上 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 “新 CSS 规 则 ”， 单 击 “ 编 辑 规则 ” 
按钮 ， 在 弹出 的 对 话 框 中 新 建 一 个 CSS 规 则 ， 规 则 定义 在 样式 表 文 件 link.css 中 ， 用 于 定义 
单元 格 的 背景 图 像 。 此 时 的 页 面 效果 如 图 15-17 所 示 。 


需 c:\inetpub\wmroot\education\indez0. html (XHTNL)* = El 


EAE menu css swfobject modified. js mm_css_menu. js 宁 


< 而 | > 
body> <tabl eimain> <tr> <td> [RD Q 100% ~v 回国 747 x 369 | 155 K /4 秒 Unicode (UTF-8) 


图 15-17 页面 效 朱 


25 用 将 鼠标 指针 定位 在 第 二 行 第 一 列 的 单元 格 中 ， 插 入 网 像 ， 同 理 ， 在 第 三 列 单元 
格 中 插入 图 像 。 此 时 的 页 面 效 果 如 网 15-18 所 示 。 

至 此 ， 页 面 的 基本 布局 制作 完毕 ， 该 页面 布局 用 于 显示 本 站 点 实例 中 的 栏目 内 容 。 为 
创建 风格 统一 的 页 面 s 可 将 该 页 面 布局 保存 为 模板 。 

26 将 鼠标 指针 定位 在 第 二 列 单元 格 中 , 在 属性 面板 上 设置 单元 格 内 容 水 平 对 齐 方式 
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为 居中 ， 重 直 对 齐 方式 为 顶端 ， 然 后 甘 簿 5 括 入 ”7 已 积 板 对象" /“ 可 编辑 区 域 ”菜单 合 
令 ， 在 弹出 的 对 话 框 中 指定 可 编辑 区 域 的 名 称 为 content。 


让 
击 mtitled-l Grir)* = El 


NA menu css swfobject modified. js link.css mm_css_menu. js oe 
> 从 


旬 TT | 六 
人 body> table> <tr> <td> Ctable> <tr><td> [RIWm QA lo vg 国 [ 720 x 396v 178 kK / 4 秒 | Unicode (UTF-8) 


图 15-18 页面 效果 
27 按照 上 一 步 的 方法 在 页 面 左 侧 的 区 域 也 添加 一 个 可 编辑 区 域 ， 命 名 为 nav。 在 栏 


日 标题 区 域 添加 一 个 可 编辑 区 域 ， 合 名 为 naame。 该 可 编辑 区 域 用 于 显示 栏目 标题 。 

28 选中 可 编辑 区 域 name 中 的 文字 ， 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 
“新 CSS 规 则 ”命令 ， 然 后 单 击 “ 编 辑 规则 ”按钮 ， 在 已 定义 的 样式 表 文 件 link.css 中 定义 
一 个 选择 需 关 型 为 “ 关 ” 的 新 规则 。 在 弹出 的 规则 定义 对 话 框 中 ， 设 置 文本 字体 为 隶书 ， 
大 小 为 x-large， 颜 色 为 桔 红 色 。 此 时 的 页 面 效果 如 图 15-19 所 示 。 


击 -: rnetpubvwmmmxrootveducationvindex0. html (XHITYL) 水 | : 


:TS content 


: : C= : Y| 
< . ] 轨 
hody> <tablejmain> <tr> <td> <table> <tr><td> [RIW Q lo ~v 回 贺 [| 747 x 389 162 K / 4 秒 Unicode (UTF-8) 


图 15-19 ”页 面 效 来 


全 此, 模板 文件 基本 制作 完毕 , 接 下 来 独 建 CSS 规 则 定义 页 面 文件 中 链接 文本 的 外 观 。 
29 选择 “窗口 ”/“CSS 样 式 ” 命 令 ， 打 开 “CSS 样 式 ” 面 板 ， 
30 单 击 “CSS 样 式 ” 面 板 底部 的 “新 建 CSS 样 式 ” 按 钮 ， 在 弹出 的 对 话 框 中 设置 选 
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19 DreomwearerC56 中 六 版 入 门 与 接 高 实例 如 间 


择 右 类 型 为 “复合 内 容 ”， 并 在 选择 右 名 称 下 拉 列 表 中 选择 a:link， 规 则 定义 在 已 创建 的 新 
式 表 link.css 中 ， 单 击 “ 确 定 ” 按 钮 弹出 狐 规则 定义 对 话 框 。 

31 骨 在 对 话 框 中 指定 文本 羚 色 为 黑色 ， 无 修饰 。 议 置 完 毕 ， 单 击 “ 确 定 ” 按 钮 关闭 
对 话 框 。 

该 规则 指定 浏览 器 中 链接 文本 的 磊 色 为 黑色 ， 且 无 下 划 线 。 

32 骨 按照 第 30 上 和 第 下 31 月 步 类 似 的 方法 编辑 ahover 和 a:visited 的 CSS 样 式 。 其 中 ， 
ahover 文 本 颜色 为 柯 红 色 ， 有 下 划 线 修饰 。 选 择 堪 a:visited 的 文本 颜色 为 黑色 ， 无 任何 修 
Vhs 

创建 样式 表 文 件 之 后 ,在 制作 站 点 中 的 其 它 页 面 时 ,可 使 用 “CSS 样 式 ” 和 面板 中 的 “ 附 
加 样式 表 ” 按 钮 将 link.css 导 入 到 其 它 页 面 中 。 

33 月 执行 “文件 ”/“ 另 存 为 模板 ”命令 ， 将 该 文件 保存 为 当前 站 点 下 的 模板 ， 命 名 

为 bg.dwt。 


15.4.3 制作 藤 套 模板 


在 本 网 站 中 ， 有 些 网 页 文件 除 显 示 内 容 及 内 容 的 有 些 相 同 之 外 ， 其 他 页 面 元 双 基 本 相 
间 。 因 此 可 以 制作 一 个 藤 套 模板 ， 在 模板 中 利用 重复 区 域 显示 页 和 内容。 
本 实例 使 用 的 髓 套 模 板 制 作 步 又 如 下 : 
019 打开 “资源 ”和 面板 ， 并 切换 到 “模板 ”和 面板 视图 。 
02 在 模板 列表 中 选中 上 一 节 中 创建 的 模板 bg.dwt， 单 击 鼠 标 右键 ,在 弹出 的 快捷 沫 
单 中 选择 “从 模板 新 建 ”命令 。 
基于 模 极 新建 的 文件 有 与 模板 完全 一 样 的 页 面 布局 ， 除 三 个 可 编辑 区 域 可 以 修改 之 
后 ， 其 他 区 域 均 处 于 锁定 状态 。 
03 删除 可 编辑 区 域 nav 中 的 文字 ， 执 行 “ 捅 入 ”/“ 和 模板 对 象 ”/“ 重 复 表 格 ” 沫 单 
命令 ， 此 时 会 弹出 一 个 提示 对 话 框 ,提醒 用 户 该 操作 会 将 当前 文件 转换 为 模板 。 单 击 “ 确 
定 ” 按 钮 弹出 图 15-20 所 示 的 对 话 框 。 


行 数 : 单元 格 边 距 : 0 | 
列 : | ”| 单元 格 间距 :0 | 
宽度 : |240 | | 像素 ~ 
过 框 : 1 | 
重复 表格 行 : 
起 始 行 : |2 结束 行 :|2 | 
区 域名 称 : RepeatRegionl | 


图 15-20 “插入 重复 表格 ”对 话 框 


04 设置 行 数 为 5， 列 数 为 1， 宽 度 为 120 像 素 ， 边 框 为 0， 起 始 行 和 结束 行 均 为 1， 区 
域名 称 为 subbmenu， 然 后 单 击 “ 人 确定 ”按钮 天 闭 对 话 框 ， 即 可 在 当前 文档 中 的 可 编辑 区 域 
搬入 一 个 重复 表格 。 

05 选中 表格 , 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 章 方式 为 左 对 齐 , 王 直 对 齐 方 
式 为 居中 ， 并 设置 单元 格 高 度 为 20。 

在 编辑 具体 的 页 面 内 容 时 ， 用 户 可 以 在 基于 该 模板 生成 的 页 面 文件 中 ， 根 据 需 要 创建 
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多 个 导航 子 栏目 。 

06 9 有 删 际 可 编辑 区 域 content 中 的 文学 ， 执 行 “ 插 入 ”/“ 模 板 对 销 ”/“ 重 复 表格 ”六 
单 命 令 ， 在 弹出 的 对 话 框 中 设置 行 数 为 2， 列 数 为 3， 宽 度 为 420 像 和 水， 起 始 行 和 结束 行 均 
为 2， 单 击 “ 确 定 ” 按 钮 插入 重复 表格 。 

07 月 选中 重复 表格 ， 设 置 单元 格 内 容 水 平 对 齐 方式 为 左 对 齐 ， 竺 直 对 章 方式 为 后 中 ， 
第 一 行 的 单元 格 高 度 为 30， 背 了 丸 颜 色 为 淡 粉 色 ， 第 二 行 的 单元 格 高 度 为 20。 

0 久 在 第 一 行 一 列 的 单元 格 中 输入 文本 “ID”， 选 中 第 一 行 第 二 列 和 第 三 列 的 单元 
格 ， 分 列 输入 文本 “标题 ”和 “发 布 时 间 ”。 此 时 的 页 面 效果 如 图 15-21 所 示 。 


09 执行 “文件 ”/“ 男 存 为 模板 ”命令 ， 将 该 文件 保存 为 当前 站 点 下 的 模板 ， 合 名 
为 content.dwt。 


全 此 ， 极 人 套 模板 制作 完毕 。 


| a A : : : 六 
pr | > 
(mmtinstance:editable4 | RI Q 100% v 回回 [| 720 x 396v 185 K / 4 秒 Unicode (UTF-8) 


图 15-21 页面 效果 
15.5 基于 模板 制作 页 面 


本 章 上 面 的 几 节 中 已 制作 了 页 面 模板 ， 接 下 来 可 以 基于 模板 生成 共 体 的 网 页 文件 了 。 


15. 5.1 制作 咨询 留言 页 面 


01 打开 “资源 ”和 面板 ， 并 切换 到 “模板 ”面板 视图 。 

02 在 模板 列表 中 选中 上 一 市 中 创建 的 模板 bg.dwt, 单 击 女 标 右 键 , 在 弹出 的 快捷 有 末 
单 中 选择 “从 模板 新 建 ” 命 令 。 

03 删除 可 编辑 区 域 nav 中 的 文字 ， 插 入 需要 的 子 栏目 标题 。 

04 删除 可 编辑 区 域 name 中 的 文字 ， 输 入 栏目 标题 ， 页 面 效果 如 图 15-22 所 示 。 

05 9 删除 可 编辑 区 域 content 中 的 文学 ,将 光标 定位 在 单元 格 中 ,切换 到 “表单 ”插入 
面板 ， 单 击 表单 图 标 按钮 ， 在 可 编辑 区 中 插入 一 个 表单 。 选 中 表单 ,在 属性 面板 上 的 “ 动 
作 ” 文 本 框 中 输入 mailto:vivi123@123.com.cn。 
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r 妆 到 举 二 己 ”如 s1 潍 


3) Dreomnwearer oo6 中 立 豚 入 门 己 提 高 实例 霜 在 
dt 


0699 将 光标 定位 在 表 里 申 ， 执 行 “ 插 入 ”/“ 表 格 ” 合 令 ， 在 可 编辑 区 域 中 插入 一 个 
九 行 两 列 的 表格 ， 表 格 宽度 为 420 像 素 ， 边 框 、 单 元 格 边 距 、 间 距 均 为 0。 


械 
旷 watitlea-z (xzma)* 


QA nenu css line dk ct _ modified. js mm_css_menu. ]s 


而 | 
<mmtinstance: editable> <span...> Ly QQ ll00% vv| 回转 [ TA4T x 369w 161 KF 4 秒 Unicode (UTF-8) 


图 15-22 页面 效 果 


07 昌 选中 第 一 行 的 两 列 单元 格 ， 在 属性 面板 上 单 击 合 并 单元 格 按钮 ， 将 其 合并 为 一 
列 蛙 元 格 , 设置 单元 格 内 容 水 平 对 章 方式 为 左 对 齐 , 牌 直 对 齐 方 式 为 居中 , 然后 输入 文学 。 

08 汪 迁 中 第 二 行 蛙 元 格 的 所 有 列 ， 然 后 单 击 属性 和 面板 上 的 合并 单元 格 控 钮 ， 将 第 二 
行 单 元 格 合并 为 一 列 。 

09 睛 选中 第 三 行 到 第 七 行 单元 格 ， 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 齐 方式 为 
左 对 齐 , 垂 和 对 齐 方式 为 居中 , 然后 在 第 一 列 单元 格 中 输入 文本 。 此 时 的 页 面 效 末 如 网 15-23 
所 示 。 


INS mem ct refebject aodified je link cers mm_exns_ Mwnt js 全 | 


| 可 六 | 
| 首页 | 宝宝 学 网 亲子 资源 | 炳 生 罗 采 | 《 < | 内 扩 天 乳 we Wat | hee | 到 二 #1 |! 

站 : hep TO 本 

' | 你 ET 3 a 4 

I 4 » HE : ' 

所 | 续 训 | re 出 去， 章 获 的 家 习 

| t 负 宫 EE: 如 打 但 我 们 的 工作 条 人 何 填 见 或 建议 ， 请 及 时 告诉 我 们 ， 我 们 1 

| 一 法 尺 志 纹 扫 消 和 的 答复 ，， 二 

| 主题 : 

t a 字 - 江 RCR } 

|” Ea £ : 

| | mr < 一 全 

I : 本 - 上 1 

! : cs . 

| : 1 

| 1 本 

me 

| bn 到 


hatinstanca editablsy <fora > [BI G Ion vv Go x av 177 EK/ 起 Wnscode VIF-0) 


图 15-23 ”页 面 效 来 


10 旧 将 光标 定位 在 第 三 行 第 二 列 的 单元 格 中 ， 切 换 到 “表单 ”插入 面板 ， 单 击 面 板 
中 的 Spry 验证 选择 构件 。 

11 在 页 面 中 单 击 验 证 构件 顶部 的 蓝 色 标签 选中 该 构件 ， 在 对 应 的 属性 面板 上 设置 
不 允许 容 值 ， 然 后 在 “预览 状态 ”下 拉 列 表 中 选择 “ 必 填 ”， 如 图 15-24 所 示 。 

12 9 在 页 面 中 单 击 验证 选择 构件 ， 调 出 对 应 的 属性 面板 ， 在 类 型 单 选 按钮 区 域 选中 
“菜单 ”， 然 后 单 击 “列表 值 ” 按 钮 ， 在 弹出 的 “列表 值 ” 对 话 框 中 添加 项 目标 签 ， 单 击 
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对 话 框 项 部 的 加 号 按钮 可 以 湛 加 多 个 项 目标 稚 。 关 闭 对 诅 框 芝 后 ， 在 属性 面板 上 的 “初始 
时 选 定 ”列表 中 选择 款 认 情况 下 显示 的 主题 标签 ， 如 图 15-25 所 示 。 


尾 性 

攻 Spry 选择 不 允许 加] 空 值 预览 状态 | 必 填 二 
rs 国 无 部 值 | 验证 于 国 onBlur 口 onChanee onSubmit 

自 定义 此 Widget 


图 15-24 Spry 选择 构 件 对 应 的 属性 面板 


类 型 @) 菜单 四) [|] 列表 值 . 类 避 ) 
〇 列表 冲 选 定 范围 门 多 许多 选 员 ) 
初始 化 时 选 定 


月 可 


济 程 充 计 。 区 


图 15-25 ”选择 构件 对 应 的 属性 和 面板 


13 旨 将 光标 定位 在 第 四 行 第 二 列 的 单元 格 中 ， 切 换 到 “表单 ”插入 面板 ， 单 击 面 板 
中 的 Spry 验证 文本 域 构件 。 单 击 文本 域 构 件 顶部 的 蓝 色 标签 选中 该 构件 ， 在 对 应 的 属性 
面板 上 设置 预 贞 状 态 为 “ 儿 撩 ”， 最 小 字符 数 为 4， 最 大 字符 数 为 20。 

14 晤 切换 到 文本 域 属性 面板 ,设置 字符 宽度 为 24， 最 多 字符 数 为 20,， 类 型 为 “单行 ”。 

15 目 将 光标 定位 在 第 五 行 第 二 列 的 单元 格 中 ， 单 击 “ 表 单 ” 和 面板 中 的 Spry 验证 文本 
域 构件 。 在 Spry 文 本 域 属性 面板 上 设置 最 小 字符 数 为 2， 最 大 字符 数 为 10， 预 抽 状 态 为 “ 初 
始 ”;， 切换 到 文本 域 属性 面板 ， 设 置 了 字符 宽度 为 12， 最 多 字符 数 为 10， 类 型 为 “单行 ”。 

16 将 光标 定位 在 第 六 行 第 二 列 的 单元 格 中 ， 单 击 “ 表 单 ” 和 面板 中 的 Spry 验证 文本 
域 构件 。 在 Spry 文 本 域 属性 面板 上 的 “类 型 ”下 拉 列 表 中 选择 “电话 写 码 ”， 格 式 为 “ 目 
定义 模式 ”， 预 哆 状态 为 “ 必 十 ”， 并 在 “提示 ”文本 域 中 输入 010-12345678。 切 换 到 文 
本 域 属性 面板 ， 设 置 字 符 宽度 为 14， 最 多 字符 数 为 13， 类 型 为 “单行 ”。 

17 将 光标 定位 在 第 七 行 第 二 列 的 单元 格 中 ， 单 击 “ 表 单 ” 和 面板 中 的 Spry 验证 文本 
域 构件 。 在 Spry 文 本 域 属性 面板 上 的 “类 型 ”下 拉 列 表 中 选择 “电子 邮件 地 址 ”， 预 究 状 
态 为 “无 效 格式 ”。 此 时 的 负面 效 灯 如 图 15-26 所 示 。 


旷 c: Inetpubvwmwxootveducationwnessage0. html (HT 六 = Ep 


省 蕉 区 】 SpryValidationSelect. css SpryValidationTextField. css menu.css lir.css swfobject modified. ]s mm_css_menu. js ] pp» 宁 


人 | 


Mr eo 


而 | > 
1 mmtinstance: editable> <form... > <table> <tr>Ktd4 [RIW Q lo0% ~v 回回 [| 337 x 410 288 K / 6 秒 Unicode (UTF-8) 


图 15-26 ”页 面 效 末 
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: 司 吉 本 几 二 地 5 中 


3) DrecERRER LS6 中 六 上 般 入 门 与 提高 实例 箱 E 
dt 


1 人 昌 选 中 第 信行 的 所 有 到 二 单 击 属性 面 权 于 的 合并 单元 格 按钮 ， 将 第 八 行 单元 格 合 
并 为 一 列 。 

19 同样 地 合并 第 九 行 单元 格 ， 并 在 属性 面板 上 设置 单元 格 内 容 水 平 对 齐 方式 和 重 
直 对 章 方式 均 为 居中， 然后 在 早 元 格 中 插入 两 个 按钮 。 

20 选中 这 一 个 控 钮 ， 在 属性 面板 上 设置 其 值 为 “提交 ”， 动 作为 “提交 表单 ”， 
选中 第 二 个 按钮 ， 在 属性 面板 上 设 症 值 为 “取消 ”， 动 作为 “ 重 置 表单 ”。 

21， 将 光标 定位 在 第 一 行 单元 格 中 ， 在 属性 面板 上 设置 其 局 度 为 80， 选 中 其 他 几 行 
单元 格 ， 在 属性 面板 上 设置 其 高 度 为 30。 此 时 的 页 面 在 实时 视图 中 的 预览 效果 如 图 15-27 
所 示 。 


{= 
风 c:\inetpub\wroot\education\message0. html (XHTHL) * = El 
[ 福 羽 妈 】 SpryValidationSelect. css 


SpryValidationTextField. css me SS 


jl | > 
<mmtinstance: editable> <form... > <table> <tbody> <tr 2Kta 100% vyv| 回 口 | [ B823 x 465 266KY7 6 种 Unicode (UTF-8) 


1 
| I 
| I 
1 ) 上 
ee 爱 的 小 朋友 ， 茜 敬 的 家 长 ; 
| 咨询 留言 | 如 果 您 对 我 们 的 工作 有 任何 意见 或 建议 ， 请 及 时 告诉 我 们 ， 我 们 
! 将 尽快 给 您 满意 的 答复 。 
1 【=— I 
| l 
| c -3 主题 : 【请 选择 一 个 主题 | $ | , n 
| 内 容 ; 和 : 
I : i i 联系 人 | 1 
I ; ee Es ) 
人 EL 联系 电话 : |010-12345678 
I i E-mail: | 1 
I os I 
[提交 [取消 ] 
e S 人 人 % 
图 


图 15-27 ”页 面 效果 
侍 此 ， 咨 询 留 言 外 面 制作 完毕 


15. 5.2 制作 信息 显示 页 面 


该 页 面 的 布局 是 本 网 站 实例 中 很 典型 的 一 个 ， 左 侧 显示 导航 子 荣 单 ， 右 侧 显 示 相 关 的 
信息 。 本 例 中 绝 大 多 数 页 面 的 显示 布局 与 此 相同 , 不 同 的 是 显示 的 内 容 和 内 容 条 目的 多 少 。 
本 页 面 将 基于 骨 套 模板 制作 ， 有 具体 制作 步骤 如 下 : 

0 人 坟 打开 “资源 ”面板 ， 并 切换 到 “模板 ”面板 视 网 。 

02 骨 在 模板 列表 中 选中 已 创建 的 嵌 套 模板 contenetdwt， 单 击 鼠 标 右键 ， 在 弹出 的 快 
捷 菜 单 中 选择 “从 模板 新 建 ” 命 令 。 基 于 藤 套 模板 生成 的 页 面 效 果 如 图 15-28 所 示 。 

03 删除 可 编辑 区 域 name 中 的 文字 ， 插 入 需要 的 栏目 标题 ， 例 如 “宝宝 学 园 ”。 

04 骨 在 页 面 左 侧 的 重复 表格 区 域 的 可 编辑 区 域 中 ， 输 入 栏目 子 标题 。 如 果子 标题 多 
于 一 个 ， 则 单 击 重复 表格 右上 角 的 加 号 按钮 ， 添 加 多 个 可 编辑 的 单元 格 。 输 入 文本 并 为 文 
本 指定 链接 目标 ， 以 及 链接 目标 文件 打开 的 方式 。 

如 果 要 删除 某 个 重复 单元 格 ， 则 单 击 重复 表格 右上 角 的 减 号 按钮 ;如果 要 调整 重复 单 
元 格 在 表格 中 的 显示 位 置 ， 则 单 击 右 上 和 角 的 向 上 或 向 下 的 三 角形 按钮 。 
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图 15-28 页面 效 朱 


二 05 按照 上 一 步 的 方法 在 页 面 右 侧 的 重复 表格 中 输入 文本 , 并 为 文本 指定 链接 目标 和 
目标 打开 的 方式 。 此 时 的 页 面 效 果 如 图 15-29 所 示 。 


曙 C:\Inetpub\wwroot\education\zueruan. html 〔XHTL) 


HR menu. css swfobject modified. js link.css mm_css_menu. js 


重复 : 人 t+|—|v|<| 


图 15-29 ”页 面 效 果 
该 页 面 在 实时 视图 中 的 预 虎 效 束 如 图 15-30 所 未 。 
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图 15-30 页面 效 末 
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渤 至 台 束 村 几 一 攻 5 起 


19 DreamweaperYCo6 中 文 版 入 门 与 村 育 实 例 款 缆 


由 于 在 模 极 文件 中 定义 了 链接 文本 显示 为 赫 色 ， 量 无 下 划 线 修饰 ， 因 此 在 浏览 如 视图 
中 显示 的 链接 文本 与 普通 页 面 文本 相同 。 当 鼠标 指针 移 过 链接 文本 时 ， 文 本 将 显示 为 桔 红 
色 ， 且 显示 下 划 线 ， 表 明 这 是 一 个 链接 文本 。 

06 执行 “文件 ”/“ 人 保存” 命令 ， 将 文档 保存 在 当前 站 点 目录 中 。 

07 呈 按照 第 用 01 昌 ~ 第 用 0 时 步 的 操作 方法 制作 其 他 类似 的 页 面 。 


15.6 制作 首页 


本 网 站 首页 的 具体 制作 步骤 如 下 : 

01 局 动 Dreamweaver CS6， 选 择 “ 窗 口 ”/“ 文 件 ” 命 令 ， 打开 “文件 ”和 面板。 在 
“文件 ”面板 左上 角 的 站 点 下 拉 列 表 中 选择 站 点 education， 并 将 站 点 视图 设置 为 “本 地 视 
图 ”。 

02 肯 在 “文件 ”面板 中 单 击 鼠标 右键 ， 在 弹出 的 上 下 文 沫 单 中 选择 “新 建文 件 ” 命 
令 ， 在 当前 站 点 中 新 建 一 个 HTML 文件 ， 输 入 文件 名 称 后 按 Enter 键 。 在 “文件 ”面板 中 双 
击 狐 创建 的 文件 ， 在 文档 窗口 中 打开 该 文件 。 

03 执行 “修改 ”/“ 页 面 属性 ”命令 ， 在 弹出 的 对 话 框 中 设置 字体 为 宋体 、 大 小 为 
14， 颜 色 为 墨色， 背景 颜色 为 相 FCA21。 切 换 到 “链接 ”页 面 ， 设 置 所 有 链接 两 色 均 为 黑 
色 ， 链 接 文 字 大 小 为 14， 且 始终 无 下 划 线 ， 然 后 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

04 在 “常用 ”面板 中 单 击 表格 图 标 ， 在 弹出 的 对 话 框 中 设置 表格 行 数 为 1， 列 数 为 
1， 表 格 宽度 为 100%， 边 框 粗 细 为 0， 单 元 格 边 距 和 间距 都 为 0， 无 标题 。 单 击 “ 确 定 ” 按 
钮 ， 在 页 面 中 插入 一 个 一 行 一 列 的 表格 。 

05 选中 表格 ， 在 属性 和 面板 上 的 “对 章 ” 下 拉 列 表 中 选择 “居中 ”， 然 后 将 光标 定位 
在 单元 格 中 , 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 章 方式 为 居中 , 牌 直 对 齐 方 式 为 顶端 。 

06 将 光标 定位 在 单元 格 中 ， 单 击 “ 第 用 ”和 面板 上 的 媒体 图 标 按钮 ， 在 弹出 的 下 拉 
玉音 中 选择 “媒体 : SWF” 命 令 ， 在 单元 格 中 插入 上 一 节 中 制作 好 的 标题 动画 。 确 你 选中 
“循环 ”和 “ 目 动 播放 ” 复 选 框 。 

单 击 属性 面板 上 的 “播放 ”按钮 ， 可 以 预览 动画 效果 ， 如 网 15$-31 上 所 示 。 


用 泛 羽 怒 】 menu. css swfobject modified. js link.css mm_css menu. js SpryValidationTextField. js 引 用 了 | 


< 
pdv> <table> <tr><td>lKobiect...A [RI i100% vv 回转 | 675 x 327w 409 K / 9 秒 Unicode (WTF-8) | 


图 15-31 预 咒 SWF 文件 效 末 
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07) 选 中 插入 的 媒体 对 象 ， 在 属性 面板 上 设置 其 相对 于 页 面 的 对 齐 方式 为 居中 对 章 。 
将 鼠标 指针 定位 在 Flash 对 象 右 侧 ， 按 下 键入 上 的 Shift+Enter 组 合 键 ， 插 入 一 个 软 回 车 。 

08 在 “常用 ”面板 中 单 击 表格 图 标 ， 在 弹出 的 对 话 框 中 设置 表格 行 数 为 3， 列 数 为 
3， 表 格 宽 度 为 872 像 素 ， 边 框 粗 细 为 0， 单 元 格 边 距 和 间距 都 为 0， 无 标题 单 击 “确定 ” 按 
钮 ， 在 页 面 中 插入 一 个 三 行 三 列 的 表格 。 

09 选中 表格 ， 在 属性 面板 上 将 其 命名 为 maincontent， 并 在 “对 齐 ” 下 拉 列 表 中 选 
择 “ 居 中 对 齐 ”。 

10 上 选中 第 一 行 单 元 格 ， 单 击 属性 面板 上 的 合并 单元 格 按钮 ， 将 第 一 行 单元 格 合并 
为 一 列 ， 然 后 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 草 方式 和 垂直 对 章 方式 均 为 居中 。 

11 9 打开 “CSS 样 式 ” 和 耐 板 , 单 击 和 面板 的 部 的 附加 样式 表 文 件 图 标 按钮 , 打开 图 15-32 
所 示 的 对 话 框 。 


链 按 外 部 样式 表 


立 件 AURL 全): Link -zz| 
添加 为 : 0) 链接 民 ) 
〇 导入 I) 


媒体 仙 ): | v 
您 也 可 以 输入 有 逗号 分 隔 的 媒体 类 型 列表 。 


Dreamweaver 的 范 剖 拌 式 表 可 以 帮助 您 起 步 。 
图 15-32 “链接 外 部 样式 表 ” 对 话 框 


12 9 单 击 “浏览 ”按钮 ， 定 位 到 14.3 节 创建 的 样式 表 文 件 link.css。 洪 加 方式 选择 “ 链 
接 ”， 然 后 单 击 “确定 ”按钮 ， 将 样式 表 文 件 链接 到 当前 文件 中 。 

13 旧 将 光标 定位 在 第 一 行 单元 格 中 , 设置 单元 格局 度 为 97， 然 后 在 属性 面板 上 的 “ 目 
标 规则 ”下 拉 列 表 中 选择 14.3.2 节 中 已 定义 的 规则 ， 为 指定 单元 格 指定 背景 图 像 。 

14 将 光标 移 到 上 一 步 定 义 背 景 图 像 的 单元 格 中 ， 选 择 “ 插 入 ”/“ 图 像 对 象 ”/ 
“Fireworks HTML” 命 令 ， 打开“ 插入 Fireworks HTML” 对 话 框 。 单 击 “ 浏 览 ” 按 钮 ， 定 
位 到 14.2.1 节 制作 的 弹出 某 单 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 插入 弹出 沫 单 。 

15 骨 选中 第 二 行 第 一 列 单元 格 ， 单 击 属性 面板 上 的 拆 分 单元 格 按 钮 ， 将 单元 格 拆 分 
为 七 行 ， 然 后 将 拆 分 后 的 第 一 行 单 元 格 拆 分 为 两 列 。 

16 选中 拆 分 后 的 第 一 列 单元 格 ， 在 属性 面板 上 将 其 宽度 设置 为 39 像 素 ， 设 置 单元 
格 内 容 的 水 平 对 章 方式 为 左 对 齐 ， 垂 和 直 对 章 方式 为 顶端， 然后 执行 “插入 ”/“ 图 像 ” 命 令 ， 
在 单元 格 中 插入 岁 像 ， 如 图 15-33 所 示 。 

17， 将 鼠标 指针 定位 在 第 二 列 单元 格 中 ， 在 属性 面板 上 设置 表格 宽度 为 242 像 素 ， 单 
元 格 内 容 的 水 平 对 并 方式 为 居中 ， 王 和 直 对 齐 方式 为 项 问 。 执 行 “ 插 入 ”/“ 表 单 ” 命 令 ， 在 
单元 格 中 插入 一 张 表格 。 

18 | 单 击 “和 常用 ”面板 上 的 表格 图 标 ， 在 弹出 的 对 话 框 中 设置 表格 行 数 为 5， 列 数 为 
1， 宽 上 度 为 100%， 单 击 “ 确 定 ” 按 钮 插入 一 张 $ 行 1 列 的 表格 ， 并 在 属性 面板 上 将 单元 格 的 
背景 颜色 修改 为 白色 。 

19， 选 中 表格 的 第 一 行 ， 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 齐 方式 和 竺 直 对 章 
方式 均 为 居中 ， 然 后 执行 “插入 ”/“ 图 像 ” 命 令 ， 插 入 一 张 位 图 。 

20 将 第 二 行 和 第 三 行 单元 格 内 容 的 水 平 对 齐 方式 设置 为 左 对 齐 ， 垂 直 对 章 方式 为 
居中 ， 然 后 插入 文本 。 
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r 妆 到 举 二 己 ”如 s1 潍 


DrecERRERL26 中 六 版 入 门 与 提高 实例 箱 E 


西 
旷 c: Inetpubvwmwxrootveducationindex0. html (XHTHL)* EC 


Ta menu css Link0. css swfobject modified. js mm_css_me 


< | 
<bodv>[Ktable#maincontent4 [RI Q 100% v gg 加 [|] 637 x 389 141 K / 3 秒 Unicode (UTF-8) 


图 15-33 页面 效果 


21 切换 到 “表单 ”插入 和 面板， 在 文本 后 和 面 分 别 插入 一 个 文本 字段 。 选 中 文本 字段 ， 
在 属性 面板 上 设置 字符 宽度 和 最 多 字符 数 ， 议 第 一 个 文本 字段 类 型 为 单行 ， 第 二 个 文本 宇 
段 类 型 为 密码 。 

22 设置 航 套 表格 中 的 第 四 行 单元 格 内 容 的 水 平 对 齐 方式 和 垂直 对 齐 方式 均 为 居中 ， 
然后 插入 两 个 按钮 。 选 中 第 一 个 按钮 ， 在 属性 面板 上 修改 其 值 为 “登录 ， 动 作为 “提交 
表单 ”; 选中 第 二 个 按钮 ， 在 属性 面板 上 修改 其 值 为 “取消 ”， 动 作为 “ 重 置 表单 ”。 

23 选 中 骸 食 表格 的 最 后 一 行 , 设置 单元 格 内 容 的 水 平 对 齐 方式 为 右 对 齐 ， 垩 和 直 对 齐 
方式 为 居中 ， 然 后 输入 文本 。 

此 时 的 页 面 效 末 如 图 15-34 所 未 。 


旷 -: Inetpubvwwwrootveducationindez0 html (XHTHL)* = lel 
QI menu css linkd.css swfobject modified. js mm_css menu.j 守 


NUNUNNNNNNNNNNNNNNNNNNN NN 


VEUUUHYHHUNOHH OHH 


NMAMONMNMNNM NN NNNNNNNNNN NNN 


vsvvsssvvvsy MMMMMMMNMOMMNNNN NA SNvvvvvvvvvvvvy MMMM 


J ee Ss 


注册 | 瑟 记 密码 


9 山 | 网 
D Xform... > <table> <tr><ta> [RW Q 100% v 回 男 国 67x3869 146X/A4 秒 Unicode (UTF-8) 


图 15-34 ”页 面 效 来 
24 和 选中 表单 下 的 第 二 行 单元 格 ， 在 属性 面板 上 将 其 背景 色 修 改 为 日 色 ， 局 度 为 3， 
水 平 对 章 方 式 为 左 对 章 ， 焉 直 对 章 方式 为 项 疾 ， 然 后 执行 “插入 ”/“ 图 像 ” 命 令 ， 搬入 一 
张 位 图 。 
25 选中 第 三 行 摆 元 格 ， 在 属性 和 面板 上 设置 背景 闫 色 为 白色 ， 然 后 将 其 拆 分 为 两 列 ， 
第 一 列 的 宽度 为 836， 水 平 对 齐 方式 为 左 对 齐 ， 垂 笛 对 齐 方式 为 项 冰 ， 第 二 列 的 育 景 凑 色 为 
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自 色 ， 然 后 分 别 插入 图 片 。 此 时 的 页 面 效 雪 如 图 15-35 所 示 。 


面 
岳 c:\inetpub\wwroot\education\indez0. html (XHTHL)* mt. 


[ 温 羽 码 】 menu. css linkd.css swfobject modified. js mm_css_me 


< 出 | 习 | 
hodv> <table... ><tr>Ktad] [RI] io0% ~v| 回 加 [| 637 x 389 | 160 kK / 4 秒 Unicode (UTF-8) 


图 15-35 ”页 面 效 来 


26 选中 第 四 行 单 元 格 ， 在 属性 面板 上 将 其 拆 分 为 两 列 ， 第 一 列 的 宽度 为 36， 水 平 对 
齐 方式 为 左 对 齐 ， 垂 直 对 齐 方式 为 项 上 中， 然后 在 第 一 列 插 入 图 亡 。 

27 选中 第 二 列 的 单元 格 ， 将 其 拆 分 为 三 行 ， 并 将 拆 分 后 的 第 二 行 拆 分 为 两 列 ， 然 后 
分 别 搬入 图 片 ， 此 时 的 页 面 效 末 如 图 15-36 所 未。 


二 
夫 :Inetpubvwmwxootveducationkindez0. html (XHTNL)* = El 


iA menu css linkD.css swfobject modified. js mm_css_menu. js 守 
[: 1 册 二 记 hu 从 


Tr 


Mosseooosoooossosossosossoosoososossooosl ss ooo000 


< i | > 
Sbodv> <table...><tr>Ktd] [Rm Q lo v 回国 [| 637 x 389 168XA4 秒 Unicode (UTF-8) 


图 15-36 ”页 面 效 来 

28 选中 第 五 行 时 元 格 , 在 属性 面板 上 设置 局 度 为 26， 背景 闫 色 为 日 色 ， 水平 对 齐 方 
式 为 左 对 并 ,垂直 对 章 方式 为 项 问 ， 然 后 插入 图 片 。 

29 将 第 六 行 的 背景 赢 色 设置 为 日 色 ， 并 拆 分 为 三 列 ， 第 一 列 的 宽度 为 39， 水 平 对 章 
方式 为 左 对 齐 ， 垂 直 对 草 方式 为 项 贿 ， 然 后 插入 图 片 。 将 第 二 列 拆 分 为 两 行 ， 然 后 分 别 择 
入 图 片 和 文字 。 最 后 在 第 三 列 捕 入 图 像 。 

3 中 选中 输入 的 文本 ， 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 “新 CSS 规 则 ”， 
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: 司 吉 本 攻 二 地 5 中 


19 DreamweaperYCo6 中 文 脾 入 门 与 村 育 实 例 款 缆 


然后 单 击 “ 编 辑 规则 ”按钮 , 在 弹出 的 对 话 框 中 指定 选择 古 类 型 为 “< 类”, 规则 定义 在 link.css 
样式 表 中 。 单 击 “ 确 定 ” 按 钮 ， 在 弹出 的 对 话 框 中 设置 字体 为 隶书 ， 大 小 为 x-largee， 闫 色 
为 更 色 。 此 时 的 页 面 效 果 如 图 15-37 所 示 。 


[2 
岳 c:\inetpub\wwroot\education\indez0. html (XHTHL)* = 


Na menu css linkD).css swfobject modified. js mm_css_menu. js 守 | 


: 001-12345678 : 


< 而 | > 
Shodv> <table...><tr>Ktdy] [RI Q lo ~v| 回 加 [| 637 x 389 174 K /4 秒 Unicode (UTF-8) 


图 15-37 ”页面 效 来 


谈 者 会 发 现 ， 尽 管 已 将 表格 的 边框 设置 为 0， 但 在 实时 视 岁 中 预览 页 面 效 果 时 ， 表 格 
边框 所 在 的 区 域 仍然 显示 页 面 的 背景 闫 色 ， 而 不 是 指定 的 单元 格 背 景 闫 色 。 
事实 上 ， 在 Dreamweaver 中 ， 如 果 用 户 没 有 明确 指定 单元 格 边 距 、 则 距 的 值 ， 
Dreamweaver 将 默认 以 边 距 和 间距 为 1 显示 表格 。 因 此 ， 用 户 只 需要 选中 表格 ， 在 属性 面板 
上 上 将 单元 格 边 距 、 间 距 明 确 指定 为 0， 即 可 解决 该 问题 。 
31 由 选中 第 七 行 单元 格 ， 设 置 单元 格 内 容 水 平 对 章 方式 为 左 对 齐 ， 王 直 对 章 方式 为 
顶端 ， 高 度 为 260， 单 元 格 背景 颜色 为 折 色 ， 然 后 在 单元 格 中 插入 岁 像 。 
32 选中 表格 maincontent 的 最 后 一 行 , 合并 单元 格 , 设置 单元 格 内 容 水 平 对 齐 方式 和 
王 直 对 齐 方式 均 为 大 中, 高 度 为 88, 然后 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 14.3.2 
节 创 建 的 CSS 规 则 ， 设 置 单元 格 的 背景 图 像 。 此 时 的 页 面 效 果 如 图 15-38 所 示 。 


面 
二 c:\inetpub\wwroot\education\indez0. html (XHTNHL)* al, 


Ri menu. css linkd.css swfobject modified. js mm_css_menu. js 守 


: 001-12345678 : 


< 山 | 入 本 
bodv> <table... ><tr>Ktd...4 [RI Q lo0% v| 回回 [| 637 x 389 | 175 K / 4 秒 Unicode (UTF-8) 


图 15-38 ”页 面 效 来 
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33 眉 将 光标 定位 在 文档 窗口 最 后 二 行 单 元 格 中 ， 然 后 在 库 血 板 中 选中 创建 的 库 项 目 ， 
并 单 击 面板 的 部 的 “插入 ” 授 钮 , 将 库 项 目 添加 a 到 页 面 中 。 此 时 的 页 面 效 来 如 图 15-39 所 示 。 


Ts 
二 C:\Inetpub\wwwroot\education\indez0. html (XHTIL)* 


口 
x 


_css_menu. j 了 
入 


CA menu css linkd.css swfobject modified. js mm_css_me 
S22 


< 向 | > 
bodv> <table... > <tr><td..> [RI Q lo v 回 加 [| 637 x 389 176 K /4 秒 | Wnicode (UTF-8) 


图 15-39 ”页面 效果 


接 下 来 制作 中 间 列 的 内 容 。 

019 选中 第 二 列 的 单元 格 ， 设 置 单元 格 背 景 颜 色 为 白色 ， 单 元 格 内 容 水 平 对 齐 方 式 
为 左 对 齐 ， 垩 直 对 齐 方式 为 顶端， 然后 在 其 中 骸 套 一 个 两 行 两 列 ， 宽 度 为 591 像 素 ， 和 单元 
格 间 距 和 边 踊 均 为 0 的 表格 。 

02 选中 骸 套 表格 的 第 二 行 的 所 有 单元 格 ， 在 属性 面板 上 单 击 合并 单元 格 命令 ， 将 
其 合并 为 一 个 单元 格 ， 选 中 第 一 行 一 列 的 单元 格 ， 在 属性 面板 上 将 第 一 列 宽度 设置 为 299 
像素 ， 第 二 列 宽度 为 292， 单 元 格 背 景 颜色 为 昌 色 。 此 时 的 页 面 效 果 如 网 15-40 所 示 。 


雷 C:\Inetpub\wwroot\education\indez0. html (XHTNL)* 一 


x 
FIA menu css linkD.css swfobject modified. js mm_css_menu. js 富 
人 


NN NNN NN 


1 
1 : 
本 注册 | 瑟 记 密 迹 


负 | 
<bodv> <table... > <tr> <td> [RIDQ lo0% vy 回回 [| 678 x 389 176 K /4 秒 Unicode (UTF-8) 


v 


图 15-40 ”页 面 效 来 


03 在 第 一 行 一 列 的 单元 格 中 散人 套 一 个 表格 ,表格 行 数 为 6， 列 数 为 1， 宽 度 为 100%。 
在 属性 面板 上 设置 表格 中 所 有 单元 格 内 容 的 水 平 对 章 方式 为 左 对 齐 ， 牌 直 对 齐 为 顶端 。 

04 几 选中 藤 套 表格 的 第 一 行 、 第 三 行 和 第 五 行 ， 在 单元 格 中 揪 六 图像 。 此 时 的 页 面 
效果 如 图 15-41 所 示 。 
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革 画 到 洒 项 三、 出 cI 入 


DrecERRER26 中 立 版 入 门 与 提高 实例 者 E 他 


本 
夫 :Inetpubwmmwxootveducationkindex0. html [XHTHL)* = a 


ss swfobject modified. js mm_css_me 


| 


9 Tm | > 
人 body> table... > <tr> <td> [IR| 池 10o0% ~v| 回回 [村 ] 678 x 389 | 188 kK / 4 秒 Unicode (UTF-8) 


图 15-41 ”页面 效 来 


05 几 选中 第 二 行 的 单元 格 ， 在 属性 面板 上 指定 单元 格 高 度 为 116， 然 后 单 击 属 性 面板 
上 的 “编辑 规则 ”按钮 ， 在 弹出 的 对 话 框 中 指定 选择 器 类 型 为 “类 ”， 规 则 定义 在 link.ess 
样式 表 文 件 中 。 单 击 “ 确 定 ” 按 钮 ， 在 弹出 的 对 话 框 中 指定 单元 格 的 背景 图 像 。 

06 按照 上 一 步 的 方法 ， 为 第 四 行 和 第 六 行 的 单元 格 设 置 背 景 图 像 ， 且 单元 格局 度 
分 别 为 115 和 112。 完 成 后 的 页 面 效 果 如 图 15-42 所 示 。 


需 c:\inetpub\wrwroot\education\indez0. html (XHTHL)* = El 


QiA menu css linkD.css swfobject modified. js mm_css menu. js 于 
成 长 天 地 


师 生 风采 Do PV morel 


Se 
1 
和 

单 ”BD 只 ww MoRE ， » 
下 


ETEEETEEEETETTTETTETETETEEETTEET TN 


< 而 | > 
bodv> Ctable... > <tr> <td> [RD Q lo v 回 同 [村] 678 x 389 196 K /5 秒 Unicode (UTF-8) 


图 15-42 ”页 面 效 来 

07 生 选中 第 三 列 的 单元 格 ， 设 置 单元 格 背 景 闫 色 为 白色 ， 单 元 格 内 容 水 平 对 齐 方式 
为 左 对 章 ， 亚 下 对 章 方式 为 项 细 ， 然 后 在 其 中 购 套 一 个 六 行 一 列 的 表格 ， 和 宽度 为 100%， 单 
元 格 间 距 和 边 距 均 为 0 的 表格 。 

0 久 选中 藤 套 表格 第 一 行 的 单元 格 ， 在 单元 格 中 插入 网 像 。 同 理 ， 在 第 三 行 、 第 四 
行 、 第 六 行 插 入 图 像 。 

09 昌 将 光标 定位 在 第 二 行 单 元 格 中 ， 单 击 属性 面板 上 的 拆 分 按钮 ， 将 其 拆 分 为 三 列 。 
然后 选中 拆 分 后 的 第 二 列 单元 格 ， 将 其 拆 分 为 两 行 。 

10 旧 选中 第 一 列 和 第 三 列 的 单元 格 ， 执 行 “ 插 入 ”/“ 疼 像 ” 染 单 命令 ， 插 入 岁 像 。 
选中 第 二 行 第 二 列 的 单元 格 ， 择 入 图 像 。 此 时 的 页 面 效 果 如 图 15-43 所 示 。 
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Ls \Inetpub\wwwroot\education\indez0. html (XHTNL)* 


钠 


区 


-| J Oo 


山 | 


[二 区 [oo v 回国 国 331 x 389 97 5 各 Wi ode ne 3 


py <tableimaincontent> <tr> <tq> ltable’ 


图 15-43 页面 效 末 


和 11 选中 第 五 行 的 单元 格 ， 单 击 属性 面板 上 的 拆 分 按钮 ， 将 其 拆 分 为 三 列 ， 然 后 分 
别 在 第 一 列 和 第 三 列 中 插入 图 像 。 

&12 有 将 光标 定位 在 库 项 目 上 端的 单元 格 中 ， 单 击 属性 面板 上 的 拆 分 单元 格 按钮 ， 将 
bn, 将 其 拆 分 为 三 列 。 

Q13D 在 第 一 行 和 第 三 行 单元 格 中 插入 图 像 ， 在 第 二 行 第 一 列 和 第 二 行 第 三 列 的 单元 
格 中 也 插入 图 像 。 

至 此 ， 首 页 的 整体 布局 制作 完成 ， 此 时 的 页 面 在 实时 视图 中 的 效果 如 图 15-44 所 示 。 


O01-—12345678 


i Copysighis 2012.27014 wn]27 A Right Reseved 三 


,es Es 


15-44 首 面 布局 效 采 
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F 妆 巩 淋 点 二 ”、 册 cI 泊 


19 DreariwEGEREC26 中 文 版 入 门 与 提高 实例 才 入 


接 下 来 在 页 面 中 添加 内 容 。 

0 外 将 鼠标 指针 定位 在 “宝贝 活动 ”区 域 所 在 的 单元 格 中 ， 设 置 单元 格 内 容 的 水 平 
对 齐 方式 和 垂直 对 齐 方式 均 为 居中 ， 插 入 一 幅 图 片 。 

0299 将 光标 定位 在 “ 宇 宇 学 园 ” 下 方 的 空白 单元 格 中 ， 设 午 单 元 格 内 容 的 水 平 对 齐 
方式 为 届 中 ,垂直 对 齐 方式 为 顶 疹 ， 搬 入 一 张 六 行 两 列 的 表格 ， 表 格 宽 度 为 100%， 单 元 格 
融 度 为 20。 在 表格 的 第 一 列 中 插入 项 目 编号 ， 第 二 列 中 插入 文本 ， 并 为 文本 添加 链接 。 

03 生 将 光标 定位 在 “宝贝 作品 ”下 方 的 空白 单元 格 中 ， 设 管 单元 格 内 容 的 水 平 对 齐 
方式 和 垂直 对 章 方式 均 为 居中 ， 然 后 在 单元 格 中 插入 一 个 一 行 四 列 的 表格 ， 表 格 宽度 为 
100%。 

04 具 选中 表格 中 的 所 有 单元 格 ， 设 置 水 平 对 齐 和 答 直 对 章 方式 均 为 居中 ， 然 后 分 别 
在 单元 格 中 插入 图 厂 。 此 时 的 页 面 效果 如 图 15-45 所 示 。 


击 -: Inetpubvwmwxrootveducationindez0 html (XHTHL) 六 = El 


E 源 共 反 ) menu. css swfobject modified.]s link.css mm_css menu.]s SpryValidationTextField. js spryya pb» 和 
: < 六 | 


v 


< Wm 
Ctable> Ctr> Ctd> <table> Ctr> ta>Kinzd [RIWm Q lo0% v 回国 [| 708 x 426 (408 K / 9 秒 Unicode (UTF-8) : 


图 15-45 页面 效 末 


接 下 来 通过 添加 代码， 使 插入 的 图 片 深 动 起 来 。 
059 在 设计 视图 中 选中 要 深 动 的 表格 , 切换 到 代码 视图 , 在 选中 代码 的 上 方 添加 如 下 


代码 : 

<marquee behavior=scroll scrollAmount=6 scrollDelay=0 direction=risht width=495 
height=120 onmouseover=this.stop() onmouseout=this. start()> 

0 外 在 选中 代码 结束 的 下 方 添加 </marquee>。 

下 面 简 要 解释 一 下 上 述 代 码 中 各 个 参数 的 功能 。 

direction: 表示 深 动 的 方 同 ， 值 可 以 是 left，right，up，down， 默 认为 left。 

behavior: 表示 深 动 的 方式 , 值 可 以 是 scroll (连续 滚动 ) 、slide (滑动 一 次 ) 或 alternate 

(来 回 深 动 〉。 

loop: 表示 循环 的 次 数 ， 值 是 正 整 数 ， 上 默认 为 无 限 循环 。 

scrollamount: 表示 运动 速度 。 

scrolldelay: 表示 停顿 时 间 ， 默 认为 0。 

height 和 width: 表示 运动 区 域 的 高 度 和 宽度 ， 值 是 正 整数 或 百分数 。 

hspace 和 vspace 沁 表示 元 系 到 区 域 边 界 的 水 平 距离 和 与 直 距 离 。 
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onmouseover=this.stopO0: 表示 当 忌 标 移 到 深 动 区 域 上 时 ， 仿 止 深 动 。 

onmouseout=this.start(0): 当 限 标 移 开 深 动 区 域 时 ， 继 续 深 动 。 

此 外 ， 还 有 两 个 不 太 和 常用 的 参数 。 

align: 表示 元 素 的 王 直 对 齐 方 式 ， 值 可 以 是 top，middle，bottom， 默 认为 middle 

bgcolor 表示 运动 区 域 的 背景 色 ， 值 是 16 进 制 的 RGB 颜色 ， 默 认为 白色 

此 时 在 实时 视图 中 预览 效果 可 以 看 到 ， 表 格 中 插入 的 网 片 从 左 人 至 右 滚动 ， 当 将 鼠标 移 
到 网 片上 时 ， 停 止 滚动 ， 移 开 鼠 标 ， 继 续 滚 动 。 

07 肯 将 光标 定位 在 “成 长 天 地 ”下 方 的 空白 单元 格 中 ， 设 置 单元 格 内 容 的 水 平 对 章 
方式 为 大 中 ， 垂 直 对 章 方式 为 项 端 ， 插 入 一 张 四 行 一 列 的 表格 ， 表 格 宽度 为 100%， 单 元 格 
高 度 为 30。 在 单元 格 中 插入 文本 ， 并 为 文本 添加 链接 。 

08 同 理 ， 在 “ 师 生 风采 ”和 “父母 学 党 ”下 方 的 空 日 单元 格 中 插入 表格 和 文本 。 
此 时 的 页 和 面 效 末 如 图 15-46 所 示 。 
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图 15-46 ”页 面 效 来 
099 在 页 面 左 侧 的 罕 白 单元 格 中 输入 公告 文本 。 


10 旧 执行 “文件 ”/“ 保 存 ” 命 令 ， 将 文件 你 存在 当前 站 点 目录 下 。 


全 此 ， 首 页 制作 完毕 ， 即 可 在 浏览 右 了 预览 页 面 效 末 。 
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16.1 实例 介绍 


时 尚 资讯 网 站 综合 实例 是 介绍 一 些 时 尚 信息 的 网 站 , 例如 美容 、 服 饰 、 搭 配 、 美 食 等 。 
整 张 页 面 主 要 使 用 表格 进行 布局 。 

由 于 古 信息 发 布 类 的 网 站 ， 因 此 本 例 有 多 个 页 面 ， 但 下 和 耐 主要 介绍 模板 制作 ， 然 后 在 
模板 的 基础 上 制作 主页 及 “施华洛 世 奇 新 品 流行 速递 页面。 实例 最 终 效 来 如 图 16-1 所 示 。 
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教 你 其 养颜 去 皱 岂 鱼 汤 DIOR2012 年 春季 新 妆容 


-Sy 


2014 vivi 版 权 所 有 
L024x768 及 以 上 的 浏览 器 浏览 


16-1 实例 主页 


当 光 标 俘 留 在 左 侧 的 滑动 面板 上 时 ， 面 板 名 称 显示 为 桶 黄色 。 单 击 面板 ， 即 可 上 下 目 
由 清 开 面板 ， 显 示 所 选 面 板 的 内 容 。 将 光标 移 到 链接 文本 上 时 ， 文 本 放大 ， 并 显示 为 橘红 
色 ， 如 图 16-2 所 示 。 

单 击 染 单 面板 “流行 速递 ”中 的 “施华洛 世 奇 新 品 ” 可 以 跳 转 到 相应 的 页 面 ， 如 图 
16-3 左 图 所 示 。 

单 击 页 面 底 部 的 “下 一 页 ”文本 按钮 ， 可 以 切换 到 当前 文章 内 容 的 下 一 页 ， 如 图 16-3 
右 图 所 示 。 单 击 页 面 底部 左 侧 的 网 片 ， 可 以 返回 到 页 面 项 部 。 
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图 16-2 ”实例 效果 
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图 16-3 ”实例 效果 


16.2 准备 工作 


在 开始 制作 本 例 之 前 ， 先 介绍 一 下 制作 本 网 站 所 需 的 准备 工作 : 
01 在 硬盘 上 新 建 一 个 fashion 文件 来， 在 fashion 目录 下 创建 一 个 images 子 目 录 。 
02 在 图 片 编辑 软件 (如 Fireworks〉 中 制作 所 需 的 图 厂 ， 如 图 16-4 一 几 16-6 所 示 ， 
并 把 这 些 图 片 保 存 到 fashion/images 目录 下 。 把 其 他 需要 用 到 的 图 片 也 都 复制 到 本 目录 。 
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图 16-4 logo 


图 16-5 栏目 标题 


图 16-6 页 面 抵 部 背景 和 导航 图 像 


03 启动 Dreamweaver CS6， 执 行 “ 站 点 ”/“ 新 建站 点 ”菜单 命令 ， 新 建 一 个 静态 
的 本 地 站 点 fashion， 使 其 指 问 fashion 目录 。 
至 此 ， 准 备 工 作 完 毕 可 以 开始 制作 网 站 页 面 了 。 


16.3 制作 模板 


由 于 本 网 站 中 的 页 和 面 要 用 到 相同 的 页 和 面 元 素 和 排版 方式 ， 因 此 可 以 使 用 模板 以 避免 午 
复 地 在 每 个 页 面 输入 或 修改 相同 的 部 分 。 在 网 站 改版 的 时 候 ， 只 要 改变 模板 ， 就 能 自动 更 
改 所 有 基于 这 个 模板 的 网 页 。 本 例 的 模板 制作 步骤 如 下 : 

01 新建 一 个 HTML 文件。 选择“ 修改 ”/“ 页 面 属 性 ”命令 ， 在 弹出 的 “页 面 属性 ” 
对 话 框 中 设置 页 面 字体 的 大 小 为 12 像素 ， 文 本 颜色 为 #666， 切 换 到 “链接 ”分 类 ， 设 置 
“链接 颜色 ”为 #4666,“ 己 访问 链接 ”颜色 为 #4600,“ 活 动 链接 ”为 丁 30,“ 下 划 线 样式 ” 
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uk es: 


还 季 


< DECmweave ID 门 与 址 高 实例 并 机 


为 “始终 无 下 划 线 ” 切换 到 “标题 /编码 ”分 类 ,在 “标题 ”文本 框 中 输入 “时 尚 资讯 ” 
然后 依次 单 击 “ 应 用 ”按钮 和 “确定 ”按钮 。 

02 将 光标 置 于 文档 中 ， 单 击 “ 插 入 ” 栏 “ 常 用 ”面板 上 的 “表格 ”按钮 ， 在 弹出 
的 “表格 ”对 话 框 中 设置 行 数 为 3， 列 数 为 1， 表 格 宽度 为 750 像素 ， 边 框 粗细 为 0， 间距 
和 边 距 均 为 0。 单 击 “ 确 定 ”按钮 插入 一 个 3 行 1 列 的 表格 ,然后 在 属性 面板 上 的 “对 章 ” 
F 拉 列表 中 选择 “居中 对 齐 ” 

03 有 将 光标 定位 在 第 一 行 的 单元 格 中 ， 单 击 属性 面板 上 的 “ 拆 分 单元 格 ” 按 钮 敬 | 
将 单元 格 拆 分 为 3 列 。 

04 选中 第 一 行 第 二 列 的 单元 格 ， 单 击 属性 面板 上 的 “ 拆 分 单元 格 ”按钮 画 ， 将 单 
元 格 拆 分 为 两 行 ， 此 时 的 页 面 效果 如 图 16-7 所 示 。 


图 16-7 表格 效果 


05. 选中 第 一 行 第 一 列 的 单元 格 ， 在 属性 面板 上 设置 单元 格 内容 的 水 平 对 齐 方式 为 
“大 中 对 齐 ” 垂直 对 齐 方式 为 “顶端 ” 

06 单 击 “插入 ” 栏 “ 常 用 ”面板 上 的 “图 像 ” 图 标 按钮 ， 在 打开 的 “选择 文件 ” 
对 话 框 中 插入 需要 的 logo 图 片 。 

019 选中 第 一 行 第 二 列 拆 分 后 的 第 一 行 单元 格 ， 在 其 属性 面板 上 的 “水 平 ” 下 拉 列 
表 中 选择 “居中 对 齐 ”， 在 “垂直 ”下 拉 列 表 中 选择 “居中 ” 宽 为 281， 高 为 93。 

接 下 来 的 步骤 设置 单元 格 的 背景 向 像 。 

08. 单 击 单元 格 属性 面板 左上 角 的 皮 史 5 按 钮 ， 在 “目标 规则 ”下 拉 列 表 中 选择 “新 
CSS 规则 ”， 并 单 击 “ 编 辑 规则 ”按钮 打开 “新 建 CSS 规则 对 话 框 ”。 

09 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “类 ” 在 “选择 器 名 称 ” 中 键入 类 名 称 ， 
例如 .background1,“ 规 则 定义 ”选择 “ 狐 建 样式 表 文 件 ”。 单 击 “ 人 确定 ”按钮 ， 在 弹出 的 
“将 样式 表 文 件 男 存 为 ”对 话 框 中 设置 样式 表 的 名 称 为 newcss.css。 

10 单 击 “保存 ”按钮 ， 打 开 对 应 的 规则 定义 对 话 框 。 在 对 话 框 左 侧 的 “分 类 ” 列 
表 中 选择 “背景 ” 然后 单 击 “背景 图 像 ” 右 侧 的 “浏览 ”按钮 ， 在 弹出 的 资源 对 话 框 中 
选择 喜欢 的 背景 图 片 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

1 入选 中 第 一 行 第 二 列 拆 分 后 的 第 二 行 单 元 格 ， 并 将 其 单元 格 内 容 的 水 平 对 章 方式 
设置 为 “居中 对 齐 ” 垂直 对 齐 方式 为 “居中 ”。 然 后 按照 第 旺 08 昌 到 下 10 号 的 步骤 设置 其 背 
景 图 像 ， 不 同 的 是 ,“ 规 则 定义 ”可 以 选择 已 创建 的 样式 表 文 件 newcss.css。 

1 全 按 上 一 步 同样 的 方法 设置 第 一 行 第 三 列 的 单元 格 的 背景 图 像 和 单元 格 内 容 的 水 
平 对 齐 方式 ， 此 时 的 页 面 效 果 如 图 16-8 所 示 。 

13 将 光标 定位 在 第 一 行 第 二 列 拆 分 后 的 第 一 行 单元 格 中 ， 单 击 “ 和 常用 ”和 面板 上 的 
“图 像 ” 图 标 按钮 ， 在 弹出 的 “选择 文件 ”对 话 框 中 插入 制作 的 文字 图 像 。 同 理 ， 在 第 二 
行 的 单元 格 中 插入 图 像 ， 此 时 的 页 面 效 果 如 图 16-9 所 示 。 
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全 TEFS bunker en dl 本 去 oa i 村 天 他 


图 16-8 页 面 效果 


A 
旷 c: Inetpubvwmwxrootvtashionkindez. html (XHTHL)* = El 


A » 


: | 让 旧作 | 

: | l J t 

: - < | 

a <. 一 -一 


Sessvvvvvvvvvvvvvvvvvvvyvvvvvvvvyvvsvvvvvsvsvvyvvvvvvyyvvvvvvyvvvsvvyvvvvvvyyvvvvvvvvvvsvvvvvvvvvvvvvvvvyvvvvvvvvsvvvvvsvvvvvvvvvvvvvvvvvvsvvvvvvvvvvvvvvvvvvvvvvsvvvvvsvvvvvvvvs 


[boav> RJ ho% v 回国 [| 767 x 237v 51 K /2 秒 | Wnicode (UTF-8) 


图 16-9 插入 logo 


1 全 将 光标 定位 在 第 一 行 第 三 列 的 单元 格 中 ， 单 击 “ 常 用 ”面板 上 的 图 像 图 标 按钮 ， 
插入 一 幅 鞋 的 图 片 。 此 时 的 页 面 效 下 如 图 16-10 所 示 。 


[ss 
击 c: InetpubvwwwxootAftashionindez. html (XHTHL)* lr. 


/ 时 尚 次 


* 四 
3 


讯 


1 [IR] 名 愉 Io0% v| 男 男 恩 76y:x237v59X72 秒 Unicode (UTF-8) 


图 16-10 搬入 网 卢 的 效 宋 


15 呈 将 光标 放置 在 第 二 行 单元 格 中 ， 设 置 单元 格 水 平 对 齐 方式 为 “居中 对 齐 ”， 重 直 
对 齐 方式 为 “顶端 ”。 单 击 “ 常 用 ”面板 上 的 表格 图 标 按钮 ， 插 入 一 个 2 行 2 列 的 表格 ， 
表格 宽度 为 100%， 无 边框 。 

16， 在 属性 面板 上 将 表格 第 一 列 的 宽度 设置 为 160 像素 ， 然 后 在 第 一 行 的 第 一 列 单 
元 格 中 插入 图 片 。 

17 选中 髋 套 表格 第 一 行 第 三 列 的 单元 格 ， 在 “水 平 ” 下 拉 列 表 中 选择 “ 右 对 齐 ” 
选项 ， 使 其 单元 格 内 容 的 对 齐 方式 为 右 对 齐 ， 并 创建 CSS 规则 定义 其 背景 网 像 。 然 后 单 击 
“党 用 ”面板 上 的 图 像 图 标 按钮 ， 插 入 一 幅 图 片 。 此 时 的 页 面 效 果 如 网 16-11 所 示 。 

可 能 大 多 数 读者 都 使 用 过 QQ 聊天 软件 ， 当 选择 “QQ 好 友 ”“QQ 群 ”或 “最 近 联 系 
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2 2 一 DECWECei ER 和 站 与 接 高 实 倒 和 教程 


人 ”时 ， 单 击 面 板 名 称 就 可 以 上 下 上 自由 滑 开 所 选择 的 内 容 ， 而 整个 窗口 不 会 发 生变 化 。 在 
Dreamweaver CS6 中 ， 使 用 Spry accordion 可 以 轻松 实现 这 种 效果 。 


休 oraetewvwwmeotvfsshionvinkes Meal [zzme)s 


[AR -加 闻 二 1 x 2 nlcode 明天 时 


16-11 页 面 效果 


18， 选 中 抠 套 表格 的 第 二 行 第 一 列 单元 格 中 ， 单 击 右键 ， 从 弹出 的 上 下 文 菜单 中 选 
择 “ 折 分 单元 格 ” 人 命令， 将 单元 格 拆 分 为 两 行 。 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 齐 
方式 为 “ 左 对 齐 ” 竺 直 对 齐 方式 为 “项 冰 ” 

19 将 光标 定位 在 拆 分 后 的 第 一 行 单 元 格 ， 单 击 “ 插 入 ” 栏 上 的 “Spry” 页 签 ， 切 
换 到 “Spry” 面 板 ， 然 后 单 击 该 面板 上 的 “Spry 折 装 式 ” 图 标 按钮 曼 ， 插 入 一 个 Spry 折 
营 式 构件 ， 如 图 16-12 所 示 。 


旷 C:\Inetpub\wwroot\fashion\indez. html (XHTHL)* 


时 尚 资讯 
10035 [749] 


可 


她 


< 到 | 转 
人 body><table><tr><td><table><tr><td>[<div.，. 习 [ 到 区 llox% v 回 男 恩 765x43v10oKy73 秒 Unicode (TFTF-6 ..: 


16-12 插入 的 Spry 折 登 式 构件 


20， 单 击 Spry 折 受 式 构件 顶部 的 赣 色 标 签 ， 然 后 在 属性 面板 上 单 击 寺 按钮 3 次 ， 添 
加 三 个 面板 。 此 时 的 属性 面板 如 图 16-13 所 示 。 


16-13 ”Spry 折 闭 式 的 属性 面板 
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21 单 击 属性 面板 上 “面板 ”列表 中 的 “标签 1”， 然 后 在 “设计 ”视图 中 将 面板 “ 标 
签 1” 的 页 签 修改 为 “流行 速递 ” 按照 同样 的 方式 将 其 他 4 个 面板 的 页 签 分 别 修改 为 “时 
尚 饰品 和 “和 盐 彩 服饰 入 “ 毅 凑 美食 ”和 “彩妆 读音 ”。 

22. 单 击 选中 “时 尚 饰品 ”面板 的 div 标签 ， 如 图 16-14 所 示 。 在 图 16-15 所 示 的 属 
性 面板 的 “类 ”下 拉 列 表 中 选中 名 为 “AccordionPanelTab” 的 样式 表 。 


国 c:\inetpub\wwroot\fashion\inder. html (XHTHL) * = 
BALD newcss. css* Spryhccordion. css SpryAccordion. js 守 
E . 4 : : E 
10096 (749) S 
SEE lb0 I eee TIT 
-oi 7 
ols benrel 
H ; v| 
< Dverflow 出 | 网 
able> <tr> <td> <table><tFZXTT7XI 7 [Ri QQ 100% v| 国 图 | 765 x 431v 103 K / 3 秒 Unicode (UTF-8) 


单 击 这 里 选择 样式 表 


图 16-15 选择 样式 表 


加 执行 “窗口 ”/“CSS 样式 ”菜单 命令 ， 调 出 “CSS 样式 ”浮动 面板 。 双 击 “ 所 
选 内 容 的 摘要 ”列表 中 的 属性 值 ， 如 图 16-16 所 示 ， 打 开 对 应 的 规则 定义 对 话 框 ， 


css 样 式 攻 攻 元 江 || 标志 ES 


全 部 | 当前 | 
所 选 内 容 的 岳 要 


“mor™~user 


je 
规则 eeeeeeeeeweeeeeeeeee 吓 加 
.hccordion <div> 
.hccordionFanelTab <div> 


“AccordionPanelTab” 的 尾 性 
-mor-user-s... none 
backeround-... 贺 页 CCCCC 二 
backeround-... url lfile: /i/C|i... 


图 16-16 ”双击 属性 值 打开 规则 定义 对 话 框 


24 用 选中 对 话 框 中 的 “背景 ”分 类 ， 单 击 “ 背 景 图 像 ”文本 框 右 侧 的 “浏览 ” 鬼 钮 ， 
在 弹出 的 “文件 选择 ”对 话 框 中 选择 需要 的 背景 图 像 ， 然后 单 击 “ 确 定 ” 按 钮 天 闭 对 话 框 。 
25 轩 单 击 “CSS 样式 ”面板 上 的 “全 部 ”按钮 ,按照 第 224 一 第 和 24 步 的 操作 方法 ， 
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了 


将 样式 名 为 AccordionPanelTabHover 的 CSS 规则 揭 交 未 颜色 修改 为 橘 黄色 ， 将 Accordion 
PanelContent 规则 的 背景 颜色 设置 为 紫色 ， 然 后 在 “区 块 ” 分 类 中 将 “文本 对 齐 ” 方 式 设 
置 为 “ 左 对 齐 ”。 此 时 页 面 的 预览 效果 如 图 16-17 所 示 。 


[a 
| C:\Inetpub\wwroot\fashion\indez. html (XHTNL) 


DiIEomweaveP>094h 入 门 与 视 高 实例 教程 


CAE newcss.css Spryhccordion. css SpryAccordion. js 


时 尚 资讯 


AccordionPanelContent 的 背景 颜色 


器 if 
© __ mR 


-一 AccordionPanelTabHover 的 文本 颜色 
(<bodvy> <table> 


i100% ~v 回 加 Il 765 x 448 107 K /3 秒 Unicode (UTF-8) 


图 16-17 修改 样式 后 的 效果 


将 鼠标 指针 移 到 茶 个 面板 的 标题 上 时 ， 页 俭 文 本 显示 为 桶 黄色 。 单 击 该 页 签 ， 即 可 展 
开 选 中 的 面板 ， 并 将 上 一 个 展开 的 面板 折 县 ， 如 图 16-18 所 示 。 


,| C:\Inetpub\wwroot\fashion\indez. html (XHTNL) 


OFA newcss.css SpryAccordion. css SpryAccordion. js 


~- 
上 时尚 资讯 “(一 


8 本 
cM nel 


><tr><td> Ctable> Ctbody> Ctr> Ctd> Cdiv. .> Xdiv...><div...> lo00% ~| 回 男 国 765:x4486 (107 K /3 秒 Unicode (UTF-8) 


图 16-18 面板 的 清 开 效果 


26. 单 击 选中 插入 的 Spry 折 车 式 构件 顶部 的 蓝 色 标签 , 然后 在 其 属性 面板 的 “面板 ” 
区 域 选 中 “流行 速递 ”， 并 在 “设计 ” 视 网 中 删除 该 面板 中 的 内 容 “内 容 1”。 

27 扣 在 属性 面板 的 “水 平 下 拉 列 表 中 选择 “居中 对 齐 ””“ 垂 直 ” 下 拉 列 表 中 选中 “项 
闹 ”， 然 后 单 击 “插入 ” 栏 “ 营 用 ”面板 中 的 表格 图 标 按 钮 ， 在 弹出 的 对 话 框 中 设置 表格 
的 行 数 为 3， 列 数 为 >， 表格 宽度 为 150 像 系 ， 且 无 边框 。 
28 上 选中 插入 的 表格 ,在 属性 面板 的 “水 平 ” 下 拉 列 表 中 选择 “ 左 对 齐 ”， 在“ 垂直” 


下 拉 列 表 中 选择 “ 届 中 ”| 局 度 为 30。 然 后 在 第 一 列 中 插入 项 目 符 写 ， 在 第 二 列 中 输入 文 
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本 ， 并 设置 文本 的 链接 目标 。 
29 按照 第 .26 到 第 上 28. 步 的 方法 在 其 他 四 个 面板 中 插 六 表格 和 文本 。 完 成 后 的 页 
面 效 果 如 图 16-19 所 示 。 


面 
,| C:\Inetpub\wwroot\fashion\indez. html (XHTHL)* le 


IA newcss.css SpryAccordion. css* Spryhccordion. js 富 
; 人 


时 沿 资 训 


vvvvsvvvvvvvvsvvvvvvssswwvvvvvvvvvvvvvvvvvvyvvvvvvvvvvvvsvvvvssssvvvvvvvvsvvvvvvvvvvvvvvvvvvvvvvvssssvvssvv ve vv 
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< 山 | 
(<bodv> <table> <tr> <td> <table> <tr>[Ktd” [RD A 10 ~v 回回 [村 | 785 x 431 108 K/ 3 秒 Unicode (UTF-8) 


图 16-19 在 面板 中 插入 文本 


30 执行“ 窗口”/“CSS 样式 ”菜单 命令 ， 调 出 “CSS 样式 ”浮动 面板 。 单 击 面板 
底部 的 “新 建 CSS 规则 ”图 标 按钮 ， 弹 出 “新 建 CSS 规则 ”对 话 框 。 
31 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “复合 内 容 ” 单 选 按 钮 ， 在 “选择 器 ”下 拉 
列表 中 选择 a:hover; 规则 定义 位 置 选择 “新 建 样式 表 文 件 ” 如 网 16-20 所 示 。 
新建 C55 规则 


选择 器 类 型 : 
汶 [SS 规则 选择 上 下 文选 择 器 尖 型 。 
复合 内 容 ( 基于 选择 的 内 容 ) 


选择 器 名 称 : 
选择 或 输入 选择 器 名 称 。 


规则 定义 : 
选择 定 必 规则 的 位 置 。 


售 f 建 样式 表 鼠 件 ) Y 


图 16-20 设置 CSS 规则 


32 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 在 弹出 的 “保存 文件 ”对 话 框 中 将 该 样式 表 命 
名 为 newcss2.css， 并 保存 在 站 点 根 目 录 下 。 单 击 “ 你 存 ” 按 钮 关闭 对 话 框 ， 并 弹出 CSS 
规则 定义 对 话 框 。 
33 在 对 话 框 中 设置 字体 大 小 为 14 像素 ， 闫 色 为 本 60， 量 无 修饰 ， 如 图 16-21 所 示 。 
然后 蛙 击 “确定 ”按钮 天 闭 对 话 框 。 
此 时 页 面 在 浏览 右 中 的 预览 效果 如 网 16-22 所 示 。 
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/9 DiEamweaveP S96 吸入 门 与 提高 实例 截 竹 


a:hover 的 C55 规则 定义 


类 型 


Font-family (F): 


Font-size (S): 图 v Font-weieht OW): 


Font-style (T): Font-variant (V): 


Line-height (TI): px Text-transform (R): 


Text-decoration MD): [ |underline (VU) Color (C) : 攻 | 


[] overline (0) 
[line-throueh (L) 
[blink) 

[Y] none (N) 


图 16-21 定义 规则 


到 
旷 c: rnetpubvwmmwzootvftashionvindex. html (XHTHL)* = 


时 注资 读 


lyg coel 


链接 文本 变 大 ， 并 显 
示 为 桔 红 色 


hodv> <table> [Ktbody lo0% v| 回转 | 765 x 448 | 108 K /3 秒 | Unicode QTF-6) :| 


图 16-22 ”应 用 样式 后 的 效 来 


当 将 光标 移 到 链接 文本 上 时 ， 文 字 变 大 在 页 面 属性 中 定义 的 字体 大 小 为 12 像素 ， 
而 在 样式 表 定义 ahover 的 字体 大 小 为 14 像素 ， 所 以 会 变 大 )， 并 显示 为 桶 红色。 

534 将 光标 定位 在 Spry 折 普 式 构件 下 方 的 单元 格 中 ， 在 属性 面板 中 的 “水 平 ” 下 拉 
列表 中 选择 “居中 对 齐 ”。 

35] 单 击 “插入 ” 栏 “ 常 用 ”面板 上 的 图 像 图 标 按钮 ， 在 弹出 的 “选择 文件 ”对 话 杠 
中 选中 己 在 图 像 编辑 软件 中 制作 好 的 图 片 。 新 建 一 个 CSS 规则 , 定义 图 像 边框 为 0, 在 “ 链 
接 ” 文 本 框 中 输入 #， 即 单 击 该 图 片 时 返回 页 面 顶端 。 

36 将 光标 放置 在 最 后 一 行 的 单元 格 中 ， 并 在 属性 面板 中 的 “水 平 > 下 拉 列 表 中 选择 
“居中 对 齐 ” 高 度 为 100， 然 后 创建 CSS 规则 为 单元 格 设置 背景 图 像 。 此 时 的 页 面 效果 
如 图 16-23 所 示 。 

57 选中 Spry 折 芝 式 构件 右 侧 的 单元 格 ， 在 属性 面板 上 设置 其 单元 格 内 容 的 水 平 对 
齐 方式 为 “ 左 对 齐 ” 重 直 对 齐 方式 为 “顶端 ”。 

38 有 选中 该 单元 禄 凡 然后 执行 “插入 ”/“ 模 板 对 象 ”/“ 可 编辑 区 域 ”菜单 命令 ， 此 
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时 Dreamweaver 将 弹出 一 个 对 话 框 ， 提 示 用 户 沪 蔚 作 将 把 页 面 转换 为 模板 。 单 击 “ 确 定 ” 
按 包 关闭 对 话 框 。 


和 :np mh hi TENTME 
| 主人 民 风 。 megesg ers 


Spryheegridir eos MT Tr is 


| 到 | 
ley TELL dtr hd foutbed [tl Tied WTF) | 


16-23 ”设置 页 脚背 景 


(9 在 弹出 的 “新 建 可 编辑 区 域 ”对 话 框 中 键入 可 编辑 区 域 的 名 称 ， 并 单 击 “ 确 定 ” 
按钮 关闭 对 话 框 。 即 可 将 选中 的 单元 格 转换 为 可 编辑 区 域 ， 如 图 16-24 所 示 。 


| C:\Inetpub\wwwroot\fashion\indez. html (XHTHL)* = a). 
NNR newcss. css SpryAhccordion. css newcss2.css* imgborder.css* SpryAccordion. js 站 
Fr 


插入 的 可 编辑 区 域 
| 


图 | 一 一 四 
[sy><tr><td>[nntemplate:editable 忆 ER 忆 llo0% v| 回国 [| 677 x 323 |122 K /3 秒 | Unicode (UTF-8) ; 


16-24 ”插入 的 可 编辑 区 域 
40 有 执行 “文件 ”/“ 保 在” 命令 ， 弹 出 图 16-25 所 示 的 “为 存 模板 ”对 话 框 。 


16-25 “为 存 模板 ”对 话 框 
41 昌 在 “描述 ”文本 框 中 输入 “页 面 的 基本 布局 ”， 在 “ 马 存 为 ”文本 框 中 键入 模板 
的 名 称 pages， 然 后 单 击 “ 保 存 ” 按 钮 天 闭 对 话 框 。 
人 至此， 页 面 的 基本 布局 模板 制作 完成 。 接 下 来 制作 文 草 详细 内 容 页 面 的 模板。 
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-局 wweove 人 ESG 二 改 入 们 与 禄 高 实例 教 克 


4 有 将 光标 定位 在 可 编辑 区 域 中 ,删除 可 编辑 区 起 中 的 文本 ， 然 后 单 击 “常用 ”而 
板 上 的 表格 图 标 按钮 ， 在 弹出 的 “表格 ”对 话 枢 中 设置 表格 行 数 为 3， 列 数 为 1， 表格 宽 
度 为 600 像素 ， 无 边框 。 单 击 “ 确 定 ”按钮 插入 一 个 3 行 1 列 的 表格 。 

4 选中 表格 ， 在 属性 面板 中 设置 “填充 ”为 10,“ 间 距 ”为 0， 然 后 新 建 CSS 规则 
为 表格 设置 合适 的 背景 图 像 ， 此 时 的 页 面 效果 如 图 16-26 所 示 。 


击 << 模 板 >> pages. dwt (XHINL)* 


和 imeborder. css* Spryhccordion. js 守 | 


源 代 码 ”newess. css Spryhccordion. css QE 
这 人 s 
时 尚 资讯 


10098 (762) 


| 加 | 


山 


一 [RW a io vo [Ml 7165 x 431 |123 K / 3 种 TO (UTF-8) 
图 16-26 设 症 表 格 属性 后 的 效果 
44 肯 将 光标 定位 在 第 一 行 的 单元 格 中 ， 在 属性 面板 上 的 “水 平 ” 下 拉 列 表 中 选择 “ 居 
中 对 齐 ” 用 CSS 规则 定义 “ 罕 体 大 小 ”为 “xx-large”， 加 粗 ， 然 后 输入 文章 的 标题 。 
45 9 将 光标 定位 在 标题 的 右 侧 ， 按 下 Shift + Enter 组 合 键 插 入 一 个 换行 符 ， 然 后 单 击 
“常用 ”面板 上 的 图 像 图 标 按钮 ， 插 入 一 条 水 平分 割 线 。 效 果 如 图 16-27 所 示 . 


面 
| 《< 模板 >> pages. dwt 【HTL] 水 


源 代 码 ”newess. css Spryhccordion. css 


| 
td .> nmtenplate: editable> <table... ><tr>Ktay [RI Q lo0% v| 回回 [|] 765 x 431 127 K / 3 秒 Unicode (WTF-8) 


16-27 ”页 面 效 林 
46 国 将 光标 定位 在 第 三 行 单元 格 中 ,在 属性 和 面板 上 的 “水 平 ” 下 拉 列 表 中 选择 “ 拓 中 


对 齐 ” 然后 输入 人 E= 页 ” 
47 有 切换 到 “ 变 本 绰 视图 ， 单 击 “ 其 他 字符 ”图 标 按钮 右 侧 的 下 拉 第 头 ， 在 弹出 的 下 
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拉 亲 时 中 选择 “不 换行 空格 ”。 单 击 该 图 标 按钮 多 座 插 入 多 售 空 格 ， 然 后 输入 “下 一 页 ”。 
48 有 执行 “文件 ”/“ 太 和 存 为 ”命令 ， 将 模 极为 存 为 名 为 article.dwt 的 模板。 


16.4 ”制作 库 文件 


在 Dreamweaver 中 ， 库 项 目 是 可 以 重复 使 用 的 项 目 之 一 ， 库 的 用 途 和 模板 类 似 ， 都 是 

可 将 同一 内 容 用 于 不 同 的 网 页 。 本 例 的 库 文 件 具 体制 作 步 骤 如 下 。 

0 但 执行 “文件 ”/“ 新 建 ” 命 令 ， 新 建 一 个 空白 的 HIML 网 页 。 切换 到 “代码 ” 视 
图 ， 删 除 <meta http-equiv="Content-Type”content="text/html; charset=utf-8"> 以 外 的 所 有 代 
人 码 。 执 行 “ 插 入 ”| “表格 ”命令 ， 插 入 一 个 一 行 一 列 的 表格 ， 宽 度 为 750 像 系 ， 边 框 为 0。 
选中 表格 ， 在 属性 面板 上 设置 对 齐 方式 为 “居中 对 齐 ”。 

02 将 光标 置 于 单元 格 中 , 设置 水 平和 垂直 对 齐 方式 均 为 “居中 风 输入 文本 Copyright 
和 一 个 空格 ， 并 将 光标 定位 在 空格 后 面 。 单 击 “ 插 入 ” 栏 的 “文本 ”页 签 ， 切 换 到 “文本 ” 
面板 。 

03 单 击 “ 文 本 ”面板 上 的 “其 他 字符 ”图 标 按钮 图 - 右 侧 的 下 拉 第 头 ， 在 弹出 的 下 
拉 玉 里 中 选择 版 权 符号。 

04 输入 文本 “2012-2014 vivi 版 权 所 有 ”之 后 ， 按 下 Shift + Enter 组 合 快捷 键 插入 
一 个 换行 符 ， 然 后 输入 其 他 文本 和 邮箱 地 址 。 

03 选中 邮箱 地 址 ， 在 属性 面板 的 “链接 ”文本 框 中 输入 mailto:vivi@123.com， 为 
选中 文本 添加 邮件 链接 。 此 时 的 页 面 效 果 如 图 16-28 所 示 。 


, 
需 utitlea-z Gm)* = [lp 


| 
Chody> [Rj 名 100% vy 回回 芭 | 455 x 88 


图 16-28 库 项 目 内 容 


06 选择 “文件 ”/“ 另 存 为 ”菜单 命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 的 “文件 名 ?” 
文本 框 中 输入 文件 名 copyright.Ibi， 在 “保存 类 型 ”下 拉 列 表 中 选择 “ 库 文 件 〈*.Ibi)。 


vy 注意 : 


2 一 定 要 将 库 文件 保存 在 站 点 根 目 录 下 的 Library 文件 夹 中 。 


07 9 单 击 “保存 ”按钮 。 执 行 “ 窗 口 ”/“ 资 源 ” 荣 单 命令 打 开 “ 资 源 ” 面 板 ， 单 击 
面板 左 侧 的 库 图 标 按钮 山 切 换 到 库 管 理 面 板 。 
08 分 别 打 开 上 一 节制 作 的 模板 pages.dwt 和 article.dwt， 将 光标 定位 在 最 后 一 行 单 
元 格 中 ， 并 在 属性 和 面板 上 设置 其 单元 格 内 容 的 水 平 对 齐 方式 为 “居中 对 章 ” 王 直 对 齐 方 
式 也 为 “居中 对 齐 ”。 
09] 在 “ 库 " 管 理 面板 的 库 项 目 列表 中 选中 制作 的 库 文件 copyrightlbi, 然后 单 击 “ 库 ， 
管理 面板 底部 的 “插入 ”按钮 ， 或 直接 将 库 项 目 拖 动 到 单元 格 中 ， 即 可 将 库 项 目 插入 到 页 
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加 下 总 丞 于 项 9T 进 


DECmnweavei ES 入门 与 接 高 实例 条 得 


面 中。 此 时 的 页 面 效果 如 图 16-29 所 示 。 


> 
需 << 模 板 >> paEes. dwt Gr) 


源 代码 newess.css Spryhcecordion. css ee 


Pa imeborder.css SpryAhccordion. js 


国 时尚 涛 品 
@。 雪 彩 服饰 
@ 。 寺 闫 美食 


园 彩妆 课堂 


插入 的 库 项 目 


一 
| 轴 | 国 | 
人 body> table> Ctr> <td. footbgy [本 区 ooy v| 回国 [| 765 x 431 |121 K /3 秒 | Wnicode (me 


16-29 在 页 面 中 插入 库 项 目 


16.5 制作 网 站 主页 


制作 了 页 面 布局 的 模板 后 ， 接 下 来 就 可 以 基于 模板 pages.dwt 轻松 制作 网 站 主页 了 。 
本 网 站 的 制作 步骤 如 下 : 
101.2 执行 “窗口 ”/“ 资 源 ” 荣 单 命 令 ， 调 出 “资源 ”面板 。 单 击 “ 资 源 ” 面 板 左 侧 
的 “模板 ”图 标 按钮 切换 到 “模板 ”管理 面板 。 
02 在 模板 列表 中 右键 单 击 pages.dwt， 在 弹出 的 上 下 文采 单 中 选择 “从 模板 新 建 ” 
命令 ， 生 成 一 个 普通 的 HTML 文件 ， 如 图 16-30 所 示 。 


击 vntitlea-s Gam) 


Hi newcss. css SpryAccordion. css newcss2.css imgborder.css Spryhccordion. js 


ane ys 上 全 
时 疝 资 讯 


1009% [749)v 


司 出 | 
Unicode (UTF-8) 


16-30 ”基于 模板 生成 的 文件 
如 果 在 “模板 ”列表 中 看 不 到 已 创建 的 模板 ， 可 以 单 击 “ 模 板 ” 和 面板 的 部 的 “刷新 站 


点 文件 ”按钮 图 
403 将 光标 定 簿 在 可 编辑 区 域内 ， 删 除 可 编辑 区 域内 的 文本 ， 然 后 在 “常用 ”面板 


上 单 击 表格 图 标 按钮 ， 插 入 一 个 4 行 2 列 、 宽 上 度 为 100%、 无 边框 的 表格 。 
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04 有 选中 第 一 行 和 第 三 行 的 单元 格 ， 在 属性 面板 上 的 “水平” 下 拉 列 表 中 选择 “ 必 
中 对 齐 ” 在 “垂直 ”下 拉 列 表 中 选择 “顶端 

05】 将 光标 置 于 第 一 行 第 一 列 的 单元 格 中 ， 单 击 “ 常 用 ”面板 上 的 图 像 图 标 按钮 ， 
然后 在 弹出 的 “选择 文件 ”对 话 框 中 选择 已 制作 的 栏目 图 片 。 

06 按照 上 一 步 同样 的 方法 在 第 一 行 第 二 列 的 单元 格 和 第 三 行 的 单元 格 中 分 别 插入 
栏目 图 片 ， 此 时 的 页 面 效果 如 图 16-31 所 示 。 


rer er 


we 
时 于 E 
时 本 次 读 
| 
Ola Gyel 
Te 


| 


2 
“allman li OF 


图 16-31 插入 栏目 标题 图 片 
0 昌 选 中 第 二 行 第 一 列 的 单元 格 ， 然 后 单 击 属性 面板 上 的 拆 分 单元 格 按钮 ， 将 单元 
格 拆 分 为 2 列 。 
0 加 选中 拆 分 后 的 右 侧 单 元 格 ， 然 后 单 击 属性 面板 上 的 拆 分 单元 格 按钮 ， 将 单元 格 
拆 分 为 8 行 。 
0 是 按照 第 时 07 号 、 第 凰 08 昌 步 的 方法 ， 将 第 二 行 第 二 列 的 单元 格 和 第 四 行 的 单元 格 
进行 拆 分 。 拆 分 后 的 单元 格 效 末 如 图 16-32 所 示 。 


> 
atinstus sitwi [a A on v- 国 国 WS ID/ nicods OTF-0) 


图 16-32 拆 分 后 的 单元 格 
10 将 光标 定位 在 第 二 行 第 一 列 的 单元 格 中 ， 在 属性 面板 上 设置 单元 格 内 容 的 水 平 
对 齐 方式 为 “居中 对 齐 ” 垂直 对 齐 方式 也 为 “居中 对 章 ” 
1 和 单 击 “ 常 用 ”面板 上 的 图 像 图 标 按钮 ， 在 弹出 的 “选择 文件 ”对 话 框 中 选中 相 
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ke es: 


还 季 


Dreamweave ES 入门 与 禄 高 实例 教 胆 


应 的 图 片 ， 然后 按照 同样 的 方法 在 其 他 需要 插入 图 片 的 单元 格 中 插入 指定 的 图 片 。 此 时 的 


页 面 效 果 如 图 16-33 所 示 。 


二 Wtitieds (rr)s 


OH sevcss czz Spryhccordion ess pawcxr css jingbsrdar cs Soryhccordion js 富 


> 
tinstinee it SU troKtd4 [A | Is ~- 看 Ll TU 


16-33 ”插入 图 片 效 果 


12 选中 图 片 右 侧 的 8 行 单元 格 ， 在 属性 面板 上 的 “水 平 ” 下 拉 列 表 中 选择 “ 左 对 
齐 ” 选 项 ， 单 元 格 高 度 为 20。 在 单元 格 中 输入 栏目 文本 ， 并 在 属性 面板 上 为 文本 添加 超级 
链接 。 
由 于 已 在 “页 面 属性 ”对 话 框 中 设置 了 普通 文本 和 链接 文本 的 颜色 和 大 小 ， 因 此 输入 
文本 后 的 页 面 如 图 16-34 所 示 。 


面 
| C:\Inetpub\wwroot\fashion\indez0. html (XHTHL)* 


ON newcss.css Spryhccordion. js Spryhccordion. css 
了 . pp 


@ 流 行 违 这 ‘3 


@@ 时 尚 沛 品 
@@ 现形 服饰 
@ 赵 颜 美食 
@ 彩妆 课堂 


1 nmtinstance: editable> <table> <tr> Ctd> <a> Cy Q lo ~v 回国 [| 785 x 431v 184 K / 4 秒 Unicode (UTF- 6 3 


16-34 插入 文本 
134 选中 栏目 标题 图 片 ， 并 调 出 属性 和 面板， 单 击 属性 面板 上 的 “矩形 热点 工具 ” 授 


钮 问 ， 然 后 在 图 片 的 “>>more” 文 本 上 按 下 鼠标 左 键 拖 出 一 个 矩形 框 将 文本 包围 。 
14 在 属性 面板 上 的 “链接 ”文本 框 中 输入 #， 在 “替换 ”文本 框 中 输入 “时 尚 饰品 ” 
该 步骤 的 作用 是 单 击 “>>more” 热 点 区 域 后 返回 页 面 顶 端 。 如 果 网 站 的 文章 比较 多 ， 
可 以 依照 该 页 面 制作 一 个 文章 列表 ， 然 后 将 热点 区 域 的 链接 目标 指 同 文章 列表 所 在 的 页 。 
15 按照 上 面 两 步 的 方法 为 其 他 栏目 图 片 添加 热点 区 域 ， 并 指定 链接 目标 和 替换 文 
本 。 人 完成 后 的 页 面 效 果 如 图 16-35 所 示 。 
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16-35 ”添加 热点 区 域 
至 此 ， 网 站 主页 制作 完毕 ， 整 个 页 面 的 效果 如 图 16-36 所 示 。 
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图 16-36 ”完成 的 页 面 效果 
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右 中 了 预 钨 ， 效 果 如 图 16-37 所 示 。 
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16.6 ”制作 其 他 页 面 


本 网 站 中 将 出 现 大 量 显示 文革 详细 内 容 的 页 面 ， 这 些 页 面 风格 类 似 。 下 面 将 使 用 模板 
article.dwt 制作 这 些 页 面 ， 步 又 如 下 : 
01 在 模板 列表 中 右键 单 击 article.dwt， 在 弹出 的 上 下 文 业 单 中 选择 “从 模板 新 建 ” 
命令 ， 生 成 一 个 普通 的 HTML 文件 。 
0 和 5 在 可 编辑 区 域 的 第 一 行 输入 文章 的 标题 ， 例 如 “施华洛 世 奇 新 品 流行 速递 ” 
03 在 第 二 行 单元 格 中 输入 文章 的 内 容 ， 并 且 可 以 插入 相应 的 图 片 ， 如 图 16-38 所 


04 执行 “文件 ”/“ 保 在” 命令 ， 将 当前 页 面 保存 为 swarovski-1.html。 
如 条 当前 文章 比较 长 ， 可 以 将 文章 内 容 分 为 多 页 ， 然 后 在 第 三 行 的 “上 一 页 ”或 “下 
一 页 ”的 “链接 ”文本 框 中 输入 链接 的 页 面 地 址 。 
05 按照 上 面 的 步骤 制作 另 一 个 页 面 ， 例 如 swarovski-2.html。 
06 选中 当前 文章 第 一 页 中 的 “下 一 页 ”文本 ， 然 后 在 属性 面板 上 的 “链接 ”文本 
框 中 输入 Swarovski-2.html。 同 理 ， 将 swarovski-2.html 页 面 中 的 “上 一 页 ”文本 按钮 指 问 
swarovski-1.html 页 而 。 
07 按照 以 上 步骤 制作 其 他 文章 的 页 面 。 
08 保存 文档 ， 并 按 F12 键 在 浏览 器 中 预览 页 面 效果 ， 如 图 16-39 所 示 。 
单 击 “上 一 页 ”或 “下 一 页 ”文本 按钮 ， 可 以 在 同一 文章 的 不 同 页 面 间 进 行 切换 。 单 
击 页 面 左 侧 的 图 乒 ， 可 以 返回 到 页 和 耐 项 新 。 
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17.1 实例 介绍 


随 看 B2B 的 兴起 ， 电 子 商务 成 为 一 个 很 热门 的 话题 。 而 网 上 购物 作为 B2C 的 一 种 主要 
商业 形式 ， 取 得 了 巨大 的 成 功 ， 比 如 大 家 熟悉 的 8848 和 当当 网 站 。 这 样 的 系统 都 是 大 型 的 
企业 应 用 ,作为 一 般 的 中 小 企业 , 没有 相应 的 技术 条 件 去 开发 和 维护 这 样 规 模 的 Web 应 用 。 
但 是 中 小 企业 也 迫切 需要 跟 上 信息 化 的 步伐 ，ASP 作 为 一 种 主流 的 动态 网 页 技术 为 这 样 的 

需求 提供 了 可 能 。 

电子 商务 网 站 综合 实例 是 介绍 网 上 交易 信息 的 网 站 ,例如 电脑 、 手 机 、 数 码 产 品 、 图 
书 音 像 、 户 外 用 品 、 珠 宝 首饰 、 鲜 花 礼 品 、 数 字 点 卡 等 。 实 例 首 页 的 效果 如 图 17-1 所 示 。 
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由 于 是 企业 应 用 的 商务 网 例 包 售 多 个 部 分 ， 例 如 顾客 注册 和 登录 、 顾 客 信 
县 管理 中 心 、 收 藏 和 购买 商品 、 商 品 和 查询 、 信 息 统 计 ， 以 及 后 台 管 理 ， 再 如 添加 /管理 商品 
信息 、 订 单 管 理 、 用 户 管 理 、 企 业 狐 闻 发 布 等 ， 如 点 击 叶 般 末 单 中 的 “ 品 脾 电脑 ”， 即 可 
打开 品牌 电脑 的 展示 页 面 ， 如 图 17-2 所 示 。 
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该 项 目的 目的 是 开发 一 个 适合 中 小 型 企业 使 用 的 网 上 购物 系统 。 网 上 购物 系统 是 建立 
一 个 虚拟 的 购物 商场 。 顾 客 可 以 在 网 上 迅速 找到 喜欢 的 商品 ， 购 物 变 得 轻松 、 快 捷 、 方 便 。 
多 种 付 称 和 送 货 方式 使 得 客户 可 以 在 和 家 完成 整个 购物 流程 ， 只 需 等 街 送 货 上 门 。 对 经 莒 者 
来 说 ， 网 上 购物 系统 又 可 以 节约 企业 的 运营 成 本 ， 迅 速 扩 大 企业 的 知名 度 ， 更 提供 了 一 个 
在 迅速 成 长 的 电子 商务 商场 上 成 长 壮大 目 壬 的 一 个 机 会 。 

根据 以 上 的 分 析 ， 本 系统 应 包括 如 下 功能 模块 : 


17. 1.1 顾客 登录 、 注 销 和 注册 管理 


一 个 网 上 购物 站 点 首先 应 有 的 功能 束 是 需要 能 够 定位 访问 的 每 个 顾客 。 在 儿 乎 所 有 可 
以 与 顾客 交互 的 界面 上 ， 都 提供 了 顾客 登录 接口 。 在 顾客 登录 后 ， 才 可 以 完整 地 跟踪 顾客 
的 行为 。 顾 客 也 只 有 登录 后 才 可 以 购买 和 收藏 商品 ， 但 看 订单 。 

一 个 浏览 者 注册 成 为 顾客 时 ， 需 要 阅读 经 营 者 发 布 的 注册 条 约 ， 只 有 在 同意 后 ， 才 可 
以 继续 。 再 注册 时 会 需要 顾客 提供 一 些 除 了 id 和 密码 之 外 的 一 些 信息 ， 例 如 E-mail 邮 箱 ， 
身份 证 号 码 还 有 电话 等 。 男 外 ， 为 了 在 顾客 态 记 密码 时 能 够 迅速 地 找 回 密码 ， 还 需要 填写 
密码 提示 问题 和 答案 。 当 顾客 丢失 态 记 密码 时 ， 只 要 凭借 密码 提示 问题 和 答案 就 可 以 取 回 
密 僻 。 顾 客 注 册 的 界面 如 岁 17-3 所 示 。 


请 填写 用 户 信 息 


用 书 名 : | 用 户 名 长 度 不 能 小 于 2。 
密码 : | 长度 必 须 大 于 6 个 字符 。 
确认 密码 | 
电子 信箱 : | 请 您 务必 填写 正确 的 E-mail 地 址 ,便于 我 们 与 您 联系 ; 
真实 姓名 : 收 货 人 姓名 。 
身份 证 :| | 此 项 信息 用 于 必要 时 以 核实 身份 ， 一 经 注册 ， 便 不 可 更 改 ， 请 如 实 填写 4 
电话 号 码 : | 请 填写 正确 的 号 码 ， 以 便 有 急事 联系 。 
腾讯 8 9: 网 上 联系 
密码 提示 
密码 答案 
推荐 人 
提 交 清除 


图 17-3 ”顾客 注册 


17. 1.2 顾客 浏览 、 查 询 和 选 购 购物 


1. 商品 的 查询 ”经验 和 权威 的 统计 数据 表明 , 当 一 个 顾客 来 到 一 个 网 上 购物 站 点 时 ， 
通常 会 有 明确 的 目标 性 , 因此 一 个 购物 站 点 应 该 提供 让 顾客 迅速 发 现 和 查找 到 他 所 感 兴 
的 商品 的 功能 。 系 统 的 查询 功能 一 方面 需要 从 单 明了 ， 另 一 方面 也 需要 文 持 为 了 提高 查找 
速度 使 用 更 复杂 的 得 询 限 制 条 件 。 

本 站 点 的 查询 分 为 简单 查询 和 高 级 查询 。 简 单 查询 的 界面 如 图 17-4 所 示 。 
关键 字 高 级 查询 


图 17-4” 便 单 合 询 


如 条 简单 得 询 不 符合 顾客 的 要 求 ， 还 可 以 使 用 高 级 得 询 。 高 级 租 询 的 脸面 相对 更 加 丰 
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é > DreamWwearer C6 中 广 豚 入 门 与 提高 实例 霜 瑚 


享 ， 不 仪 可 以 根据 以 上 的 分 类 进行 会 询 ， 同 时 还 提供 根据 价格 、 分 类 等 信息 进行 组 合 条 件 
的 得 询 。 此 功能 实现 更 为 复杂 ， 但 是 坚 无 疑问 得 询 的 效率 则 会 提高 很 多 ， 顾 客 也 会 更 为 迅 
捷 的 发 现 所 需要 的 商品 ， 如 图 17-$ 所 示 。 


商品 名 称 w 
1000 元 以 下 vw 
商品 分 类 : 查询 所 有 分 类 wv 
[查找 ] 


图 17-5 ”高 级 查询 


2. 购物 流程 ” 当 顾 客 在 浏览 或 者 合 找 发 现 目 己 心仪 的 商品 时 ， 会 有 购买 的 欲 谓 。 顾 
客 购 买 商 品 时 必须 休 循 一 定 的 流程 ，Web 应 用 的 下 部 有 一 个 导航 条 提示 顾客 怎样 购物 ， 如 
图 17-6 上 所 示 。 


到 图 可 中 罗 世 未 :二 让 先 罗 - 2 六 购物 丰 - :去 收银 各 -> 硼 认 收 让 人情 县 -> 壬 付款 方式 -> 选 配 寺 方式 -> 芷 线 坎 付 或 下 单 后 汇 称 - 守 款 硝 了 从- 深 -7 沈 成 


图 17-6 ”购物 流程 


顾客 使 用 这 种 方式 购物 时 ， 可 以 在 将 所 有 和 欲 购买 的 商品 加 到 购物 车 后 再 到 顾客 中 心 统 
一 下 单 订购 。 顾 客 中 心 古 一 个 集成 的 提供 给 顾客 的 管理 各 种 信息 的 平台 ， 如 图 17-7 所 示 。 
单 击 左边 的 “我 的 购物 车 ”， 右 边 的 收藏 夹 中 会 显示 出 顾客 所 有 已 收藏 的 商品 。 


我 的 收 王 肤 


市 器 价 会 几 从 折扣 肌 阶 


图 17-7 顾客 中 心 购物 车 管理 
如 果 顾 客 想 放弃 某 个 商品 ， 可 以 选择 “删除 ”功能 从 购物 车 中 删除 指定 的 商品 。 
如 果 顾 客 选 择 了 “去 下 订单 ”， 则 转移 到 图 17-8 所 示 的 订购 模块 ， 此 时 会 要 求 顾 窜 填 
瑟 收 贷 人 的 详细 信息 ， 送 货 方式 、 付 球 方 式 等 ， 顾 客 也 可 以 留 下 一 些 对 了 商品 的 人 简单 评论 。 


收 货 人 姓名 : 『  ” “性别 :| 男 可 

收 货 人 (省 ) 市 : a 

详细 地 址 : [| 
邮 篇 pp 

电话 [TT 

电子 邮件 : iangsukid@hotmal.co 


普通 平邮 
特快 专递 CEMS ) 
送 货 上 门 
个 人 送 货 

Eee 送 货 上 门限 制 于 本 市 
二 

E 通 银 行 汇 

I 邮局 汇款 

网 上 支付 


| 提交 订单 | 


图 17-8 ”顾客 填写 订单 


340 


当然 ， 顾 客 也 可 以 直接 点 击 商 品 展示 页 面 上 的 “购买 ”按钮 ， 转 移 到 订购 模块 。 
如 果 顾 客 订 购 成 功 ， 会 返回 一 个 订购 成 功 的 页 面 ， 并且 详细 列 出 顾客 所 提交 的 订单 的 
信息 ， 如 图 17-9 所 示 。 


您 已 成 功 的 提交 了 此 订单 ! 详细 信息 如 下 : 


订单 号 : 200441394427 
商品 列表 : 
市 场 价 会 员 价 YIP 价 数量 。 积分 小 计 
Travelllate BB1XCi 15500 元 14500 元 14000 元 140 分 | 14500 元 
您 选择 的 送 货 方 式 : 普通 平邮 附加 费用 : 12 元 共计 : 14512 元 ;赠送 积分 : 140 分 
订货 人 姓名 : king 
收 货 人 姓名 : king (先生 ) 
收 货 详 细 地 址 : kine street 


邮编 : 100000 ”电话 : 3828223 ”电子 邮件 : kina@kine. com 

送 货 方式 : 普通 平邮 支付 方式 ; 建设 银行 汇款 

您 的 留言 : :) 

和 ， 汇款 时 请 注 明 您 的 订单 号 汇款 后 请 及 时 通 
I 


付款 方式 


关闭 窗口 订单 完成 创建 时 间 : 2004-4-13 9:44:27 
图 17-9 ”顾客 提交 的 订单 


顾客 中 心 是 一 个 集成 的 管理 顾客 信息 的 平台 ， 在 这 里 顾客 可 以 修改 目 己 的 个 人 资料 、 
修改 密码 、 碍 看 订单 状态 、 填 写 收 货 人 信息 。 

3. 订单 管理 ” 当 顾 客 在 前 全 选中 耿 爱 的 商品 并 且 提 区 了 订单 以 后 ， 这 些 订单 融 转 
移 到 了 后 合 ， 等 竺 管理 员 的 处 理 。 管 理 员 在 后 全 需要 有 专门 的 处 理 订 单 的 模块 。 

为 了 方便 管理 员 维 护 和 更 改 订单 的 状态 ， 系 统 提 供 了 多 种 方式 显示 所 有 的 订单 。 有 5 
种 不 同 的 订单 状态 : 未 作 任何 处 理 、 顾 客 已 划 出 球 、 服 务 曾 已 收 到 球 、 服 务 商 已 发 出 货 、 
顾客 已 收 到 货 过 小 所 有 的 订单 。 

为 了 能 够 快速 地 定位 订 和 蛙 ， 系 统 同样 提供 了 便 找 功能 ， 如 图 17-10 所 示 : 


按 下 单 用 户 查询 [请 输入 用 户 名 [全 部 订单 状态 “| 查询 | 订单 号 :| 查 找 | 


图 17-10 ”订单 查询 


管理 员 通 过 得 询 功 能 可 以 迅速 定位 到 相应 的 订单 ， 通 过 “修改 订单 状态 ”按钮 ， 可 以 
修改 订单 的 状态 。 当 订单 状态 显示 为 “顾客 已 收 到 货 ” 时 ， 蕊 味 看 一 笔 完整 的 交易 已 经 完 


车 部 注 弄 路 旺 。 央 LI 洲 


成 。 充 

计 

17.1.3 商品 展示 、 添 加 和 信息 维护 红 

1， 商 品 展示 “现实 世界 中 的 百货 商店 、 超 市 中 会 有 各 种 各 样 的 柜台 或 者 货架 用 来 展 ”| 实 

示 商 品 。 网 上 购物 系统 同样 也 需要 向 顾客 展示 商品 的 舞台 。 最 常见 的 展示 方式 是 根据 商品 。 | 例 
的 分 类 信息 来 进行 的 ， 例 如 数码 产品 、 鲜 花 礼品 。 在 大 的 分 类 下 进行 二 级 的 分 类 ， 这 样 的 
两 级 分 类 体制 能 够 使 顾客 迅速 地 发 现 自 己 感 兴趣 的 商品 ， 如 图 17-11 所 示 。 这 些 分 类 信息 


祁 可 以 在 后 合 由 管理 员 进 行 维护 。 

仅仅 捉 供 根据 商品 的 分 类 信息 来 浏览 和 碍 找 商 品 坚 无 疑问 是 不 够 的 ， 这 也 正 是 电子 商 
务 优越 于 传统 的 商业 经 销 模式 的 优点 之 一 。 对 于 供 货 商 新 进 的 商品 ， 系 统 提 供 了 一 个 “新 
品 上 架 ” 的 功能 ， 可 以 集中 展示 那些 经 营 者 最 莉 采 购 的 新 于 商品， 如 图 17-12 所 示 。 
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Dreamweawer + EA 与 和 实例 孝 5 


[商品 导航 
ET 本 TBy 品牌 :日 本 未 芝 ， 华硕 Asus * 日 本 了 EC， 惠普 康 柏 。 宏基 Acer "联想 曲阳 清华 紫光 ， 
[EE 二 证 诺 基 亚 ， 西门 子 . 飞利浦 . 爱立信 ， 摩托 罗拉 . 阿尔 卡特 " 三星 "波导 ， 
ELITE 煞 码 相机 ， 探 者 机 " cl 播 放 器 " 录音 笔 随身 听 . 复读 机 。 

有 是 历史 传记 . 恐怖 战争 "情感 喜剧 科幻 伦理 。 儿童 卡通 . 古典 音乐 。 
EDE 折 香 点 模 . 充气 用 品 . 登山 用 品 . 照明 用 具 . 刷 床 垫子 炊具 水 具 。 
上 EE 于 汪 游 戏 卡 类 " 电话 卡 类 . 上 网 卡 类 . 邮箱 卡 类 ， 教育 卡 类 " 其 他 卡 类 。 
医 EE 也 本 性 感 吉 装 * 性 感 套装 . 美腿 系列 " 男士 内 裤 " 知名 品牌 " 忧 惠 套装 。 
[也 本 台 埃 及 银饰 * 时尚 饰 品 " 佳人 首饰 . 汽车 模型 瑞士 军刀 " 丙 碟 美 外 。 
了 E 巴 寺 汪汪 男 用 器 具 * 女 用 器 有 具 . 壮阳 产品 . 情趣 用 品 * 避孕 测 孚 ， 浪 福 睡 裙 。 
太 于 二 下 跑步 机 健身 车 . 司 耻 板 "举重 机 健身 球 . 跑步 畦 ， 

苹 护肤 类 . 彩 居 类 . 香水 类 .美体 类 美容 类 减肥 类 。 


图 17-11 商品 导航 


您 的 位 置 : 首 页 新 品 上 架 
商品 名 称 : a 
商品 品 脾 :gq 
上 市 日 期 : 1980 年 1 月 1 日 ”浏览 次 数 : 4 
商品 价格 : 1 元 会 员 价 :1 元 


商品 名 称 : 
商品 品 昕 : 商品 简介 : b 
上 市 日 期 ; 训 览 次 数 :0 


商品 价格 : 1 元 会 员 价 : 1 元 


商品 名 称 : 

商品 品牌 : 商品 简介 : v 

上 市 日 期 : 1980 年 1 月 1 日 ” 训 览 雇 数 :0 商品 型 号 : wv 
商品 价格 : 1 元 会 员 价 :1! 元 折 扣 : 100% 


证 收 茂 


图 17-12 ”商品 列表 (新 品 上 染 ) 


2. 商品 销售 等 信息 的 统计 为 外 的 一 个 第 见 的 展现 方式 是 销售 排行 榜 。 销 售 排 行 前 
十 名 的 商品 通常 是 多 数 顾客 部 感 兴趣 的 ， 统 计 并 显示 出 来 可 以 激发 顾客 的 购买 欲 。 

“关注 排行 ”功能 是 根据 顾客 浏览 一 个 商品 的 次 数 进 行 排行 的 ， 这 样 经 营 者 会 很 容易 
发 现 顾客 对 哪些 商品 感 兴趣 。 0 能 会 注意 到 “关注 排行 ”与 “销售 排行 ”的 区 别 ， 
这 也 当然 会 被 经 营 者 注意 到 。 为 什么 兴趣 没有 转换 为 实际 的 购物 行动 ? 经 营 者 稍 已 会 发 现 
经 营 中 的 问题 ， 如 定价 是 售 过 高 。 

特价 商品 通常 是 最 能 吸引 顾客 眼球 的 ， 系统 为 此 提供 了 一 个 “特价 商品 ”集中 展示 的 
方式 ， 所 有 特价 的 商品 部 可 以 在 此 “柜台 ”得 以 展示 。 类 似 的 是 经 营 者 向 顾客 推销 的 “ 推 
存 商品 ” 栏 ， 这 个 “柜台 ” 则 回顾 客 推荐 茶 些 商品 ， 这 些 商 品 是 经 营 者 根据 销售 、 浏 览 信 
| 

DL 修改 和 维护 商品 信息 ”商品 管理 主要 包括 三 个 方面 : 添加 新 的 商品 、 奉 看 
es 站 喇 、 管 理 商 品评 论 。 通 过 “添加 新 的 商品 ”可 以 完成 进货 。“ 添 加 新 商品 ”的 界 面 
如 图 17-13 所 示 。 

Ph 肴 而” 功能 使 管理 员 可 以 修改 指定 商品 的 信息 。 修 改 商 品 的 界面 与 “ 诬 加 
新 疝 品 ”的 界面 相同 ， 上 只 是 需要 再 次 提交 即 可 。 

“管理 商品 评论 ”功能 可 以 使 党 理 员 对 顾客 对 商品 的 评论 进行 租 看 和 删除 。 


Ds 


342 


秒 加 0 
这 择 分 芝 : 而 牌 包 入 "| 小 此 : | 日 本 永志 "| 
部 性 : 而 品名 夭 ; 
| 而 品 品 息 : 
而 品 向 介 ， 
上 市 日 期 1980 涪 王 [L 司 月 [ 司 日 
而 师 人 类 : 市 场 份 ; |! 元 ， 会 员 价 ; |! 


[ES rs 


人 
就 性 了 疾 ， 
启明 ; 


| 
副 


图 17-13 ”添加 新 的 商品 


17.1.4 网 站 配置 管理 


当 开发 者 开发 的 应 用 系统 分 发 到 不 同 的 经 营 者 时 ， 不 同 的 经 营 者 会 有 不 同 的 系统 定制 
要 求 。 系 统 的 初始 化 配置 应 该 具有 根据 不 同 的 使 用 者 进行 不 同 的 配置 的 功能 。 常 见 的 一 些 
配置 ， 包 括 Web 应 用 的 版 权 信息 、 与 经 营 者 的 联系 方式 、 网 站 广告 的 定制 。 

不 同 经 营 者 的 某 些 具体 经 营 策略 会 是 不 同 的 。 具 体 到 付款 方式 、 注 册 条 约 、 交 易 条 款 
等 等 信息 都 是 可 以 定制 的 。 


17.2 数据 库 设计 


Web 应 用 跟踪 和 管理 顾客 的 状态 、 行 为 主要 有 两 种 措施 ， 一 是 使 用 Session 或 Cookie 保 
存 顾客 活跃 期 间 的 信息 ， 但 是 这 些 信 息 在 会 话 结束 后 将 不 再 存在 。 对 于 那些 需要 持久 傈 存 
的 信息 ， 例 如 顾客 的 订单 、 顾 客 的 注册 资料 、 商 品 的 信息 则 必须 通过 数据 库 进 行 存 储 。 数 
据 库 适合 存储 那些 需要 持久 保存 的 信息 ， 并 且 提 供 很 好 的 方式 进行 查询 、 插 入 、 修 改 和 删 
除 。 这 主要 借助 于 SQL (Structured Query Language) 的 强大 功能 。 

分 析 购 物 系 统 的 特点 会 发 现 有 三 类 信息 需要 存储 在 数据 库 中 。 

(1) 顾客 信息 和 顾客 购物 、 订 单 维护 方面 的 数据 库 : 包括 存储 顾客 注册 信息 的 表 ， 订 


单 内 容 的 表 ， 
(2) 商品 信息 的 表 : 包括 商品 分 类 的 表 ， 丙 品 对 应 的 图 片 的 物理 位 置 存储 的 表 ， 商 品 
详细 信息 的 表 


(3) 其 他 杂项 : 包括 新 闻 、 人 公告、 初始 设置 、 评 论 等 方面 的 表 。 

该 数据 库 包 括 16 个 不 同 专题 的 表 : ad 表 、admin 表 、category 表 、config 表 、delivery 表 、 
impglinks 表 、keyname 表 、links 表 、mess 表 、news 表 、notify 表 、orders 表 、product 表 、review 
表 、sorts 表 和 user 表 。 各 个 表 的 稍 要 说 明 信 息 如 下 所 示 ， 话 细 的 表 结 构 和 笠 段 说 明 请 读者 
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dt 


参考 随 书 “ 源 代码 ”文件 。 

ad 表 : 该 表 主要 存储 购物 站 点 的 广告 信息 ， 如 广告 的 天 键 字 、 广 告 图 厂 的 位 置 、 广 告 
的 链接 等 信息 。 

admin 表 : 该 表 主 要 存储 后 台 管 理 员 的 信息 ， 如 帐号 、 密 但 和 级 别 信息 。 

category 表 : 该 表 主 要 存储 商品 分 类 信息 ， 分 类 的 编写 、 类 别名 称 等 信息 。 

config 表 : 该 表 主 要 存储 配制 网 站 的 初始 信息 ， 如 网 站 名 称 ， 地 址 ， 联 系 电 话 等 信息 。 

delivery 表 : 该 表 主 要 存储 付 及 区 的 方式 信息 ， 如 费用 、 递 送 方式 、 优 先 级 等 信息 . 

keyname 表 : 该 表 主 要 存储 顾客 搜索 的 关键 字 信 息 ， 如 关键 字 名 称 、 优 先 级 等 信息 。 

links 表 : 该 表 主 要 存储 友情 链接 信息 ， 如 链接 站 点 名 、 链 接地 址 、 排 列 顺序 等 信息 。 

mess 表 : 该 表 主 要 存储 顾客 在 留言 板 的 留言 信息 ， 如 顾客 的 留言 主题 、 内 容 、 联 系 
E-MAIL 和 留言 的 IP 地 址 等 信息 。 

news 表 : 该 表 主 要 存储 了 新 闻 信 息 ， 如 新 闻 的 标题 、 内 容 、 添 加 者 、 诬 加 时 间 和 浏览 
次 数 等 信息 。 

orders 表 : 该 表 主 要 存储 顾客 的 订单 信息 ， 如 顾客 名 、E-MAIL、 电 话 和 增加 时 间 等 信 
岂 。 

a ee a 分 类 、 价 格 和 说 明 等 信息 。 

review 表 : 该 表 主 要 存储 顾客 对 商品 的 评论 信息 ， 如 标题 、 碍 看 时 间 、 内 容 等 信息 。 

sorts 表 : 该 表 主 要 存 促 商品 的 二 级 分 类 信息 ， 如 列表 商品 信息 、 排 序 顺 序 、 产 品类 别 


A 人 
等 信 县 o 


user 表 : 该 表 主 要 存储 顾客 注册 的 信息 ， 如 顾客 的 帐号 、 加 密 后 的 密码 、 访 问 次 数 等 


17.3 技术 要 领 
本 节 将 介绍 网 站 建设 的 相关 技术 要 和 领 


17. 3. 1 #include 指 令 


在 一 个 ASP 页 面 中 ,可 以 使 用 #include 指 令 把 为 一 个 文件 的 内 容 插 入 到 当前 的 页 面 中 。 
这 条 指令 读 取 该 文件 的 全 部 内 容 并 搬入 到 该 页 中 ， 这 是 一 种 非 第 有 用 的 插入 HTML 段 落 的 
技术 。 

通过 把 脚本 和 内 容 分 开 的 方法 ,给 页 面 提供 了 一 个 组 成 层次 。 这 意味 看 如 果 对 脚本 进 
行 了 修改 ， 在 客户 首 再 次 打开 该 页 面 时 ， 脚 本 的 修改 情况 目 动 地 反映 到 使 用 包含 文件 的 每 
个 页 面 中 。 例 如 ， 律 见 的 数据 库 连 接 的 获取 部 作为 一 个 单独 的 模块 包含 到 所 有 的 ASP 页 面 
Hs 


index.asp 
“小 一 NOEuce file= "oonNnn sp >> 


CONnNn.asp 
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<S% 

db=”"admin/database/#TimesShop.mdb” 

Set Conm— Server,CreateOb eet (“ADODB .COonneection’) 

Connstr=”Provider=Microsoft.Jet .OLEDB.4.0;Data Source=” & 
SeErver MapPatli( tdbDe””) 

Conn.Open connstr 

%$> 


这 样 当 修 改 数据 库 连接 时 ,所 有 包含 conn.asp 的 页 面 引用 的 数据 库 连 接 都 会 得 到 修改 ， 
从 而 大 大 减轻 了 代码 开发 的 工作 量 ， 这 可 以 更 好 地 保证 软件 的 质量 ， 也 是 模块 化 和 降低 软 
件 之 间 厅 合 性 的 思想 的 体现 。 


17. 3.2 权限 控制 


后 从 的 用 尸 权 限 分 为 三 类 : 浴 加 人 员 、 碍 看 人 员 和 管理 员 。 浴 加 人 员 可 以 座 加 、 修 改 、 
删除 商品 资料 ;得 看 人 员 只 能 管理 商品 评论 和 顾客 订单 ; 管理 员 拥 有 本 站 所 有 管理 权限 。 

通过 后 合用 户 的 rank 属 性 可 以 跟踪 顾客 的 权限 ，rank 值 从 数据 库 中 该 出 后 是 放 在 
Session 中 的 。 例 如 根据 约定 ,rank 值 大 于 1 的 不 是 系统 管理 员 ， 如果 试图 执行 某 些 权限 不 够 
的 操作 时 ， 就 会 捉 示 “你 的 权限 不 够 ! ” 


17.3.3 WMD5 加 密 算 法 介绍 


所 有 存储 在 系统 中 的 密 但 都 以 MD5S 不 可 逆转 方式 进行 加 密 。 加 密 的 目的 是 防止 通过 打 
开 ACCESS 数 据 库 下 接 得 到 各 个 帐号 的 密码 ， 包 括 管 理 员 。 

MD5 是 一 种 单 问 加 密 算法 ， 只 是 对 数据 进行 加 突 ， 没有 办 法 对 加 密 以 后 的 数据 进行 解 
密 。 单 向 加 密 的 作用 在 于 即使 信息 被 泄漏 ， 这 些 经 过 单 生 加密 的 信息 的 含义 仍然 无 法 完全 
被 理解 。 

rs(“password”)=md5 (trim(request.form(“password”),)),) 

上 述 代码 在 存储 顾客 的 密码 到 数据 库 时 进行 了 加 密 。 所 有 的 加 密 算法 都 在 系统 的 根 日 
录 下 的 func.asp 中 ， 详 见 随 书 “ 源 文件 ”文件 夹 中 的 内 容 。 


17. 3.4 实现 验证 码 的 登录 


与 上 面 的 MD5 加 密 算 法 的 目的 相同 ， 为 了 防止 恶意 地 使 用 程序 不 断 狂 测 帐号 的 密码 ， 
系统 采用 了 验证 码 ， 如 图 17-14 所 示 。 验证 人 码 的 主要 思想 就 是 在 顾客 的 登录 界面 随机 生成 一 
个 数 ， 在 顾客 登录 的 同时 要 求 输入 这 个 数 。 用 系统 中 记录 的 这 个 随机 数 与 顾客 的 输入 进行 
验证 ， 就 可 以 防止 恶意 请 求 登录 页 。 


mr sa 
验证 704 [于 录 | 注册 


图 17-14 ”顾客 登录 


345 


DrearnERRERTLSS 中 文 策 入 门 与 担 高 实例 得 有 
使 用 验证 人 码 的 难点 在 于 将 数 鱼 转换 成 一 个 内 容 为 数字 的 图 片 显 示 出 来 。 这 个 功能 在 
code.asp 中 完成 ， 其 中 使 用 了 ADO 的 Stream 对 象 读 写 文件 的 内 容 。 


<S% 

Ot or Ee ' 强制 声明 所 有 使 用 的 变量 

NumCode 

Function NumCode () 

` 若 将 Response .Expires 设置 为 负数 或 0， 则 禁用 缓存 
ReSspDOoOmSeobxpLlrees 
Response.AddHeader "Pragma", "no-cache" 
Response.AddHeader “cache-ctrol", "no-cache™ 

` 禁 止 使 用 绥 存 ,上 面 儿 行 代码 的 作用 是 保证 页 面 能 够 自动 刷新 ， 即 使 后 退 到 原先 的 页 面 。 
QTN 
dim Ados,Adosl 
Randomize timer 
zNum = cint (8999*Rnd+1000) ` 生 成 随机 数 
Session("GetCode") = zNum  ”`\ 将 随机 数 的 值 使 用 session 来 存放 
ce Zz (A SE 
NStr=cstr (zNum) 
For i=0 to 3 

PN (Cd oN NO Eu th ls 


mid 函 数 表 示 返 回 NStr 子 符 串 的 从 第 it1 个 位 置 开始 的 1 个 字符 , 这 意味 看 zimg(i) 对 应 看 


ZNum 的 第 ji 个 学 符 。 
Next 
OA 
Set AdOS=SoervVer CreateoObTect (AO St rean.,) 
Ados .Mode=3 
Ados .Type=1 
Ados .Open 
set Adosl=SoervervCreateOb ect ("AdodBa treanm,) 
Adosl1 .Mode=3 
Adosl1 .Type=1 
Adosl1 .open 
‘ADO 流 对 象 可 以 读 取 文 件 的 内 容 ，Ados 流 对 象 就 是 读 取 include/body .Fix 的 内 容 
Ados ,LosddpPrombpile(Server .mapbpath( nennies DodYyae x)) 
` 读 出 1280 个 字 节 
Adosl .write Ados.read(1280) 
OE 1=0 0 3 


Ados.Position=(9-zimg (i))*320 ` 计 算出 在 Ados 流 中 的 位 置 ， 即 9 减 去 这 个 值 在 乘 以 


320 
Adosl.Position=i*320 :计算 出 应 该 在 Ados1 流 中 写 的 位 置 ， 即 320 个 字 节 写 一 个 数 
Adosl vite cdo ead(o20 9 Sineloae Doar pi 0 
next \ 笛 环 处 理 四 位 数 上 的 各 个 位 
\Adqos 流 重 新 指 癌 include/head.fix 
QOS) 
Pos=lenb (Ados .read()) 返回 Adaos .read () 一 次 读 取 的 内 容 的 字 节 长 度 
Ados .Position=Pos 
二 
Ge) 
`j 每 增加 1，Position 的 值 增加 320， 刚 好 可 以 和 上 面 的 值 对 应 起 来 。 
AdoOel ooo Lion 0 O20 
故国 
Ados .write adosl.read(30) 
next 
next 
Response .ContentType = "image/BMP" “` 写 出 的 类 型 为 一 个 bmp 图 片 
Ados .Position=0 
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Response.BinaryWrite Ados .read () 
Ados.Close:set Ados=nothing 
Adosl.Close:set Adosl=nothing 
EmceeE amnct Lon 
%> 


17.4 导航 条 


任何 一 个 成 功 的 Web 应 用 都 离 不 开导 航 功 能 。 系 统 中 的 导航 条 分 为 两 个 部 分 : 首部 导 
航 条 《如 图 17-15 所 示 )〉 和 尾部 导航 条 《如 图 17-16 所 示 ) 


信息 反馈 
7704 [登录 | 注册 | 用 户 论坛 


首页 品牌 电脑 ”时尚 手机 数码 产品 ” 图书 音像 ”户外 用 品 ”数字 卡 类 珠宝 服饰 ”鲜花 礼品 ”成 人 保健 ”健身 器 材 化妆品 
更 新 于 : 2012 年 T 月 6 日 QQ: S1739572 Tel: (0)13564426997 | 关键 字 立即 查询 高 绷 查 询 


图 17-15 首部 导航 条 
|] 渤 风 -> 加 入 购物 车 -去 收银 台 -> 确 认 收 货 人 信息 -> 渤 付 款 方式 -> 省 配送 方式 -在 线 支付 或 下 单 后 汇款 -> 汇款 确认 -发 货 -完成 


商品 分 类 | 新 品 上 架 | 销售 排行 ”关注 排行 | 推荐 商品 | 特价 商品 购物 流程 订单 查询 付款 方式 购 藉 统计 | 购 物 车 | VIF 会员 | 售后 服务 
关于 我 们 | 在 线 帮 助 | 工作 时 间 | 送 货 方式 | 变易 条 款 | 常见 问题 | 运输 说 明 | 保密 实 全 | 版权 声 明 | 设 为 首页 | 加 入 收藏 广告 服务 | 意见 反 讲 


上 友情 链接 : 时 代购 物 系 统 搜狐 网 易 新 浪 


1000 
bibles 


客服 信箱 : service@timesboard. com 热线 : (0)13564426997 公司 地 址 : 中 国 上海 ” 邮 编 : 200000 管理 进入 
Powered by TimesShop version 4.5 官方 简体 中 娘 版 ”时 代 网 联 科技 :51739572 
Copyrieht@ 时 代 网 络 ”页 面 执行 时 间 31.25 毫秒 总 共 访 问 有 量 : 885286632， 今 日 访问 : 7113， 昨 日 访问 : 8382 


图 17-16 尾部 导航 条 
在 多 数 asp 文 件 中 都 可 以 发 现下 面 的 语句 : 


<!——#include rp sap > 

这 行 代码 的 功能 是 将 首部 导航 条 包含 到 当前 页 面 中 ， 这 种 方式 可 以 使 网 站 维持 统一 的 
风格 。 如 果 对 header.asp 作 了 修改 ， 会 动 反 映 到 所 有 包含 其 的 文件 中 。 

首部 导航 条 中 最 上 部 的 导航 条 由 以 下 代码 实现 : 


<a nref=vregq ase/SEW</aS 

< ee Veorile ep action ender I I</ 

< rer /rorile ds 2action Gadodtocd re ”><B> RI </ /a 

< rer /intronD SN/ a 

<a nref "procat sor hm </a> 

首部 导航 条 中 顾客 登录 部 分 由 以 下 代 但 实现 ; 

WP 

login.asp 的 主要 内 容 如 下 : 

<form name=loginfo method=post action=chkuser.asp> 

<ErS<to <Inoue name Username voe Cexe ro Ueername T7695</e0 < 47 No 
客 名 =-=-> 

有 
入 密码 -> 


<td><input name=passcode type=text id=passcode size=9></td><!-- 输 入 验证 人 码 
> 
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法 至 避 冰 或 中 旺旺 [起 


DrecamRERRER LS 中文 般 入 门 与 担 高 实例 条 


<td><img src=”code.asp”></td><!--code.asp 生成 验证 但 的 bmp 网 像 --> 

En eve Some me ume le ee ver 
CE 

<input name=comeurl type=hidden value=<% = url %>></td></tr></form> 


<!-- 使 用 隐藏 域 来 传递 url 地 址 ， 以 便 在 登录 成 功 后 重新 转 全 本 页 。 顾 客 名 保存 在 了 


Cookies (“timesshop”) (“username”) 中 --> 


17.5 顾客 注册 和 登录 


本 站 将 讲述 顾客 注册 和 登陆 系统 的 制作 方法 。 


17.5.1 填写 注册 信息 


用 户 注 册 时 , 第 一 页 显示 的 是 注册 条 约 , 在 顾客 同音 注册 条 约 后 将 会 跳 转 到 如 图 17-17 
所 示 的 填 与 信息 的 页 面 。 


请 填写 用 户 信息 
用 户 名 : 用 户 名 长 度 不 能 小 于 2。 
客 网: 长 度 必 须 大 于 6 个 字符 。 
确认 密码 : 
电子 信箱 : 请 您 务必 填写 正确 的 E-mail 地 址 ,便于 我 们 与 您 联系 ; 
真实 姓名 : 收 货 人 姓名 。 
身份 证 : 此 项 信息 用 于 必要 时 以 核实 身份 ， 一 经 注册 ， 便 不 可 更 改 ， 请 如 实 填写 4 
电话 号 码 : 请 填写 正确 的 号 码 ， 以 便 有 急事 联系 。 
腾讯 8 9: 网 上 联系 
密码 提示 : 
密码 答案 : 
推荐 人 : 

提 交 清 除 


图 17-17 注册 页 面 


reg.asp 实 现 了 顾客 注册 的 处 理 ， 包 括 显 示 初 始 的 填写 表单 。reg.asp 根 据 碍 询 捉 的 不 同 
值 采 取 不 同 的 操作 。 


<!——#include file=”conn.asp”-——> <1-- 数 据 库 连接 --> 

el ee <!-- 站 点 的 配置 信息 --> 

<%dim action 

> <!-- 取 得 碍 询 串 action 的 值 --> 
<tit1le><s=webnames>-- 痢 顾客 注册 </ 人 tit1Le> 

< +inclgde file "include/header ds > 

<S% 

select case action ` 根 据 不 同 的 查询 串 action 的 值 作 相 应 的 操作 


当 奋 询 串 的 action 的 值 为 衬 时 ， 说 明 是 首次 进入 访 页 ， 则 应 打印 注册 条 约 。 
case ™%> “\ 笃 值 时 ， 显 示 注 册 条 约 


<TR> <TD HEIGHT=”18” ALIGN=”"center”><br><B><FONT SIZE=2><%=webnames%s %> 注 册 
ON Ee 0 Te 


<TR> <TD> <%call tiaoyue ()%> </TD></TR> 调用 显示 注册 条 约 的 子 过 程 tiaoyue () 


<Ssub tiaoyue () VBSCr1BE, 显示 注册 条 约 子 过 | 
Set TS=Server.CreateOBb Ject (adodD.. reeordset’”) 
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omoOpDen oSLeet Te rom omit re On 
` 注 册 条 约 的 内 容 保存 在 config 表 的 rule 字段 中 ; 由 于 文本 内 容 很 长 ， 所 以 在 ACCESS 数据 库 
中 "必须 选择 memo 类 型 


EE Om er ne (S(te Ualees Ye) ` 去 挥 首尾 的 空格 
Ee 风电 对 入 
set rs=nothing ` 释 放 内 存 

end sub 

<TR> 


< or on ye > 
<bEORMINAME= EoOrm MLdIOD "Ost ACTION=" re aSsp acCt Ton Yes > 


<!-- 同 意 ， 注 意 QueryString 变 为 action=yes--> 

<INPUT TYPE=”submit” NAME=”Supbmit4”... VALUE=”" 我 同 意 ”> 

<!-- 不 同意 ， 转 到 首页 --> 

<INPUT TYPE=”button” NAME=”"Submit22” VALUE=~” 我 不 同 和 意 ”” 和 … 
GE 

</TD></FORM></TR> </TABLE> 


如 来 顾客 已 经 同意 注册 条 约 ， 则 打印 出 填 与 顾客 评 细 注册 信息 的 表单 ， 继 续 注 册 。 

EV <!-- 说 明 顾 客 已 经 同意 注册 条 约 --> 

<!-- 奏 询 串 变 为 action=save--> 

<FORM NAME= “userinfto” METHOD=”post” ACTION=”reg.asp?action=save” > 

< PR>eID Wtn SSO > LENO NAME= USermame TYPE= Lert DD= = Oernanc2 > 

顾客 名 长 度 不 能 小 于 2。</TD></TR> <! 一 输入 顾客 名 -> 

TD < TNDUT NAME "aS T/ChemoasonoLd TD "asso I | 0 
1 /TD TE <!- 输 入 密码 -> 

ON 
ROW 

<TD><INPUT NAME="passwordl1" TYPE="password" ID="passwordl"></TD></TR> 


<TD> <INPUT NAME="useremail" TYPE="text" ID="useremail2"> 请 您 务必 填写 正确 的 
E-mail 地 址 ， 便 于 我 们 与 您 联系 ; </TD></TR> 

<TR><TD><ad1Y oo nt ONT COToRE HE > 六 二 全 攻 
</FONT></div></TD> 


<TD> <INPUT NAMF="realname" TYPF="text" ID="realname2"> 收 货 人 姓名 。，。 
</TD></TR> 


输入 顾客 的 身份 证 号; 三 个 事件 触发 的 都 是 验证 号 份 证 号 的 输入 是 否 合法 的 正则 表达 
式 。onkeypress 在 键盘 有 键 按 下 时 触 友 ，onpaste 在 粘贴 时 触发 ， 而 ondrop 在 限 标 拖拉 操作 


的 结束 时 触发 。 
<TB> <ENPI NAME = ent lftwv i TYPE ert TD montLfly2 onev Deess = 
站 regInput (this, NO 
String.fromCharCode (event .keyCode))" 
onpaste = 和 
window CliDboOardDaeatav etData( Text ly 
ondrop = We regInput (this, ls ell oe 


eveme da da er cetDac a Tex ae A 
2 


<TD> <TNPUT NAME— "moOBbLLle TYEE= tert TD mmole2 OmNkKev Oress Peturn 

"ee Moab he en Ne On Stinov tromCharCode (event kesyeEooe) 
onpaste = Ce 
window -cl rioBboardDatarogetData( Fext py) ONndroB= Eet Ur 攻守 可 下 入 加 本 有 下 2 
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ZO VE 
便 有 急事 联系 。</TD> </TR> <!-- 输 入 正确 的 电话 号 码 --> 


ROW ON 
/TD 


<TD> <INPUT NAME="usergq" TYPE="text" ID="userdaqd2" onkeypress = "return 
eeneut ns Strinog fomCharCode(event keyCode yy 
onpaste = neu (en 0 0 
window.clipboardData.getData('Text"'))" ondrop = "returm Teoglneout (thisy, 
A 2 dl0 F217 event ddtalranster getData(' Text "SM 了 条 </TD></TRS 


<TR><TD> 密 人 码 提 示 : ” </TD> 

<ID><INPUT NAME="quesion™" TYPE="text"™" ID="quesion2"> </TD></TR> 
<TR><TD> 密 码 答案 : </TD> 

<TD> <INPUT NAME="answer™ TYPE="text" ID="answer2"> </TD></TR> 
TET 


<!- -推荐 人 的 信息 ， 如 果 一 个 顾客 成 为 推荐 人 可 以 提高 这 个 顾客 的 信誉 值 -~> 


<TD> <INPUT NAME="recommender™" TYPE="text" ID="recommender"> </TD></TR> 


<INPUT ONCLICK=”return check();” TYPE=”submit” NAME=”Submit3” 1 » 
VALUE=" 提 交 ”> <!-- 使 用 JavasScript 验证 顾客 的 输入 是 否 合 法 --> 
ES value=" 清 除 "> </TD> <1!-- 重 新 置 


一 一 > 


| 


17. 5.2 注册 信息 提交 


如 末 顾 客 的 注册 都 合法 ， 那么 将 会 显示 图 17-18 所 示 的 注册 成 功 页 : 


用 户 往 册 成 功 . 
林 可 ， 炬 巳 赃 册 成 为 [E-5TUDID 工 作 室 ] 正 式 用 户 ， 诗 进行 下 一 步 操作 ; 


" 为 了 方 倒 褒 的 风物 :于 襄 密 坑 瑟 详 弓 的 收 但 小资 料 


“得 同 首页 
图 17-18 注册 成 功 
如 果 帐 号 或 者 E-MAIL 信 箱 已 经 被 使 用 ， 则 会 显示 下 面 的 信息 〈 如 图 17-19) : 


用 户 注 册 先 败 
" 谷 输 入 的 用 户 名 或 Email 地 址 已 经 被 注册 ,1 土 选 用 其 地 的 用 户 名 或 者 E-mail 


" 点 击 返 回 上 一 页 


图 17-19 注册 失败 


上 述 功能 是 在 reg.asp 页 面 中 实现 的 ， 查 询 串 中 action 的 值 变 成 了 save。 ade 
顾客 是 否 已 经 注册 过 一 次 ， 如 果 是 ， 则 不 允许 在 此 注册 。 然 后 根据 顾客 注册 的 帐号 和 填 
E-MAIL 判断 数据 库 中 是 否 已 经 有 相应 的 顾客 存在 。 ean 
顾客 ， 则 也 不 允许 继续 注册 。 如 果 注 册 失 败 ， 调 用 顾客 注册 失败 子 过 程 统 一 处 理 失 败 返 回 
给 顾客 的 信息 。 


<%SCase “save”%s> <! 一 -保存 这 个 注册 的 顾客 信息 -> 

<!1--#include file=”func.asp”--> <!--func.asp 里 面 定 义 了 一 些 函 数 ， 比 如 加 密 的 
MD5， 所 以 需要 包含 进来 --> 

< \ 调 用 子 过 程 saveuser () 

end select%> 

<!--#include file=”include/footer.asp”--> 尾部 导航 条 
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sub saveuser () ` 保 存 顾 客 信 息 的 子 过 程 

Lm orce ot Eomtit ob Ea St eres ul 

if session(“regtimes”)=1 then ` 判 断 当 前 会 话 的 顾客 是 否 已 经 注册 过 一 次 
response.Write “<div align=center><br><br> 对 不 起 ， 您 刚 注 册 过 顾客 。<br> 请 稍 后 


再 进行 注册 ! </font></div><pbr>” 


response.End 


engd Tt 

Set ro Server CreatcooOBDTeete( adod Eccecordeset 0) 

rs.open “select username,useremail from [user] where 
username=’”&trim(request.form(“username”))g&”’ Or 


USCTEe = (ES tt Or UCTmemo lb On Ti 


` 从 数据 奋 中 选择 顾客 名 或 者 E-MAIL 相同 的 记录 ， 如 果 存 在 。 则 不 允许 注册 ， 报 错 
if not rs.eof and not rs.bof then 

call usererr () ` 报 错 子 过 程 

0 CLOSE 

Set Ee = "moORrng 

else 

3 0 LOSE 


rs.open “select * from [user]j”,conn,l1,3 ‘已 可 写 方式 打开 数据 库 中 的 user 表 
rs.addnew \ 添 加 新 记录 


res( USername y=trim(regueste form( username)) \ 顾 客 名 
rs(“"pasesword") mdo (trim(regquest ,torm(“"password”)y)) ` 密 人 码 

Ee (ae a | (ema ` 顾 客 的 E-MAIL 地 址 
rs(vquesion”)=trim(request.form(“gquesion”)) \` 密 但 提示 问题 
SanmSWer )=mdo (trim(regquest. tOrm( amSWe \` 密 但 提示 问题 答案 
rs(“recommender’”)=stradd \ 推 荐 人 
rs(“realname’”)=trim(request.form(“realname’”)) ` 真 实 姓名 

FS et ety nt oem Mer Lt ye 本 
和 \ 移 动 电 话 

Ee Eo) El Ee ne “QQ 号 但 
rs(“adddate”)=now () ` 注 册 日 期 

roe( vastvet EN ` 最 近 一 次 访问 的 日 期 


rs.update 
rs.close 
set rs=nothing 


end 1if 

end sub 

sub usererr() $> 
` 顾 客 注 册 失 败 


< et av ri litorv oo( I tontolor ed | 


ET 


<!--UJavaScript 语句 : 返回 上 一 页 ，--> 


下 面 的 一 段 JavaScript 代 码 用 于 分 析 和 判断 顾客 历 填 写 的 注册 信息 是 否 合法 。 
ER EANGUAGE JovaSCrioe > 
Re 


GE // 检 得 顾 客 的 输入 是 否 合法 
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if(checkspace (document .userinfo.username.value) 图 
oeument RE 作用 二 和 二 本 下 全 // 不 能 为 空 并 且 长 度 不 能 小 于 2 

document .userinfo.username.focus () ; 

alert (\ 顾 客 名 长 度 不 能 小 于 2， 请 重新 输入 ! ”) ; 


FECLUEN LalLSES 


if(document .userinfo.password.value!=document .userinfo.passwordl .value) 


docunment USsSerinto. Sassword foocus'(); 
document USerinfto asSesword valuer =— 
document USerinto. BasSSswordl evalie = : 
alert (\ 两 次 输入 的 密码 不 同 ， 请 重新 输入 ! ”) ; 
return false; 


} 
if (dOocunent Userinfo noeremail value lengthl=e0 /7//m 人 EE MATD HI 大 


lf 
// 已 .或 者 6 开头 是 不 合法 的 ,没有 @ 或 者 .的 E-MAIL 地址 也 是 不 合法 的 , @ 或 者 .在 E-MAIL 地 址 的 
末尾 也 十 不 合法 的 


站 
oe me ml ne | 
document .userinfo.useremail.value.indexOf (‘“Q@’, 0) 三 一 一 站 
四 国人 


document .userinfo.useremail.value.lastIndexOf (\Q7”) == 
document er imo nem lu onotn da mn info vseremo nl val 
ue.lastIindexOf (“.”)==document .userinfo.useremail.value.length-—1) 
{ 
alere( ema Hull t% a ME 达 
document .userinfo.useremail.focus () ; 
J a SS 


else 


» Vs 
lere en 
document .userinfo.useremail.focus () ; 
PEE DERM “EEL SSS 


} 
rt OT EC Lt (oT ec ta) 
{ 


var docSseLl = document. .SelLectionmn .ereateRangel() WE 
fac el Drenen lien oName MW SND 7 /A 
NT 


return false 

oSel ="dooSe le auplieete() 

oSel.text = ™” 

Var srcRange = ob]j.createTextRange ( ) 

Soc oetencdbonmmt( Setartlioot art oroRAe) 

Va te = lxt Lt to OR Eext ouDet eto el tort bemotl) 


el ll re de ee // 根 据 正 则 表达 式 检 验 输 入 是 否 合 法 
} 
function checkspace (checkstr) { // 判 断 字 符 串 的 内 容 是 否 全 为 空格 
Va St = 
Or = 0 Cckeotr er tl 
St = St 
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} 
meevn(sten eS eneelsten 
} 
J 


Re > 


17.5.3 顾客 登录 和 注销 


顾客 登录 对 话 框 是 包含 在 首部 导航 条 中 的 ,登录 成 功 后 ,登录 框 变 为 图 17-20 所 示 的 界 
面 ， 顾 客 可 以 注销 。 


欢迎 Wing 光临 您 是 普通 用 户 
您 目前 有 1 区 未 处 理 订单 ”用 户 中 心 
共计 : 11200 元 际 邮 寓 i 注销 登录 


图 17-20 ”登录 成 功 后 


验证 码 的 内 容 在 “技术 要 领 ” 一 节 已 经 叙述 过 ， 下 面 重点 介绍 一 个 任何 商务 站 点 都 需 
要 的 登录 的 设计 。Login.asp 是 完成 显示 登录 界面 的 源码 和 用 户 登 录 成 功 后 的 界面 的 设计 。 


ie asp > 


<!-- 验 证 顾客 输入 是 否 合法 的 JavaScript 函数 构成 的 脚本 程序 --> 


< eoUuecst eookies( venessnop (vosernam enenee HWS 
Dim url o> 


“ormame Ione mh eos eron en 7 enkusereose 
< widehn=s 0 negne 19 0 lion Pione novaD tvle padding Lere lox ms 
</td> 


> 

<td style=’padding-left:1px’> 

<input name=passcode type=text id=passcode size=9></td> 

<!--code.asp 完成 产生 一 个 随机 数 ， 并 且 已 一 个 位 图 文件 显示 的 功能 。 生 成 的 随机 数 放 到 
Session (“GetCode”) 中 存储 --> 

<to style— padding left Ex < mg Src -ae 本“ > 

<ta style=‘ Padding left: lbx’> 

< ut nl /een 
Eee 有 

<!--hidden 域 即 隐 天 域 用 来 传递 一 些 信息 是 一 种 很 有 效 的 方式 --> 

<input name=comeurl type=hidden value=<%=url%>></td></tr></form> </table> 

< 区 

else 

` 顾 客 已 经 登录 

dim shop,rsvip,username, shopjiage 

set TS= Server CreateOB Tect( "adodb recordset”) 

` 从 数据 库 中 找 出 那些 该 顾客 所 订购 的 商品 的 详细 信息 ， 要 求 订 蛙 的 状态 为 2, 即 未 处 理 的 订单 

rs.open “select 
PEodgucteprece ,DrodUuct VIDPrLICS DEOGOUCE DricCcel orders poouecrnunm 至 工 Gin 
product inner Join orders on product.id=orders.id where orders.state=2 and 
orders.Username= "&trim(reaquest .Cookies( timesshop’ ) (“Username ))e” “ 
SCOnm, Leol 

set shop=server.CreateObject (“vadodb.recordset”) 

` 从 订单 表 中 选择 该 顾客 的 订单 状态 为 2 的 商品 列表 , 即 未 处 理 的 订单 


shop.Open oelecetk distirnet (goods) OM orders where 
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Username=’”&request.Cookies (“timesshop’”) (“username’”)g&”!’ and state=2 
eenva > 

if Shop.recordcount=0 then $> <!-= 记 有 录 条 数 为 0-> 

<table WwW et b= OS border=”0” cellspacing=”0” cellpadding=”0” 
align=”center”> 

<tr><td 人 = Request.Cookies (“timesshop”) (“username’”) $%$> 
光临 enpsp; 您 是 普通 顾客 </td></tr> 

> 上风“ 有 未 下 是 可 时 < -> 

to < neersprorile a oct i on = or orile hn e/a < /eo /EES 

EP < v0 O00 To to a Neer= lod a 


</table> 

<% 

else ` 记 录 条 数 不 为 零 

ee na ne <!-- 包 有 历 记录 集 ， 计 算出 所 有 未 处 理 订 单 的 价格 的 总 额 --> 


SnopLiade=TOUuUnd(SsnopD Ladetrs( DELOCOZ J ol( roc tr 2 
rs.movenext 
OO > 
<table width=”100%” border="”0”" cellspacing=”0” cellpadding=”0” 
alrgn= "CenNnter > <ti> 
和 
您 是 普通 顾客 </td></tr><tr> 
<td> 您 日 前 有 <% = shop.recordcount $%> 笔 未 处 理 订 单 </td> 
全 
站 
注销 登录 </a></td></tr></table> 
<S% 
So et 
shop.Close 
set shop=nothing 
rs.close 
set rs=nothing 
end if 
> 


usefunc.asp 文 件 包 含 的 都 是 一 些 验证 顾客 输入 合法 性 的 JavaScript 代 人 码 ， 评 细 内 容 见 ” 
源 代码 ”文件 来。Code.asp 完 成 的 是 生成 验证 码 并 有 旦 生成 pomp 图 片 显示 出 来 。 这 里 用 到 了 
ADO 的 Stream 对 象 进行 文件 的 谈 写 ， 详 细 内 容 参 若 ” 源 代 码 ” 文 件 夹 。 

用 户 提 区 的 信息 会 转 给 chkuser.asp 处 理 ，chkuser.asp 负 责 处 理 login.asp 传 递 过 来 的 用 户 
名 和 密码 等 信息 和 数据 库 中 的 是 否 相 符 ， 以 决定 用 户 登 录 的 成 功 与 失败 。 


<!-—-#include file="conn.asp"-——> 

“<1 Hinelude {file="fune,.asp"= > 

< 

dim username,password, comeurl,passcode 


取得 从 login.asp 传 递 过 来 的 用 户 名 、 密 人 码 等 参数 信息 。 如 果 登 录 成 功 ， 则 重 定 癌 到 用 
户 登 录 时 的 页 面 ， 所 以 也 需要 取得 comeurl 参 数 的 值 。 


oO 


和 到 加 和 
和 ` 密 人 码 
Dasescode=Crnte(reoauest form("DaSsscecode™),) \ 验 证 但 
en em te ‘comeurl 是 否 为 裕 
comeurl="index.asp" 
else 
SOmMmEurl=t rm( eest. OoOrme voOmeurl 
end if 
if username="" or password="" then ` 如 果 用 户 名 或 密码 为 空 
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response.Write "<script LANGUAGE=' ]avVvaSctr1IPt ">alLett (" 登录 失败 ! 请 检查 您 的 登 
录 名 和 密 伺 ! ');history.go(-1);</script>" 

response.end 

人 io 

El (ee en ` 验 证 人 码 错 误 

EEOonse Weice <Sorioe TANCUACE= va serioe' lere('oT Wy 
met or Vy (I /re 

response.end 

enqd 1f 

set re=Server.CreateOb eect( ado recordSset”) 


` 从 数据 库 中 的 用 户 表 中 判断 此 用 户 是 否 存 在 


rs.Open “select * from [userl] Where username='"&uSsSernameg&™'" and 
Password='"&password&"' " ,conn,l1,3 

if nor (re Dor and re veor)y then ` 如 果 存 在 ， 则 判断 验证 码 是 否 正 确 

if password=rs ("password") and passcode=Session("GetCode") then 
response.Cookies ("timesshop") ("username")=trim(request.form("username")) 
rs("lastvst")=now() 

rs( lognnuam’) res( Joonmmmoam™" ) tl 

rs.Update 

rs.Close 


set rs=nothing 

call loginok\() 

else 

eSBon er ieee Serior TANGOUACGE = oaSerior eee NS 
录 名 和 密码 ! ');history.go(-1);</script>" 

end if 

else ` 登 录 失 败 

ome Wee ri LIANGUAGE ave eerie So Ure( OA 
录 名 和 密码 ! ');history.go(-1);</script>" 


end if 

sub loginok () “也 忆 加 于 过 树 

EesDonse Wiee "<font size=2> 欢 迎 WE ET 
size=2>"&request.Cookies ("timesshop") ("username")&"</font>, 光临 两 秒 种 后 将 目 动 跳 


Te A < FOE 
TesBonse redlirect Comeurl 
end sub 
conn.close 
Set OO nothnyng 
等 > 


17.6 顾客 中 心 


17.6.1 进入 顾客 中 心 


顾 


图 17-21 顾客 中 心 


Je 


可 这 下 所 时 贡 4[ 恕 
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顾客 中 心 控制 台 左 边 的 一 酉 类 似 于 一 个 末 早 栏 。 主 要 的 源 文件 有 两 个 分 别 是 profile.asp 


和 disuser.asp。Profile.asp 的 主要 内 容 : 


<I——+Hincelude tile= CoOnm asp > 

< Hinmelude file = funce ap > 

< Hinolude file= Contig dep > 
<tLit1le><s=webnames>-- 我 的 账户 < 人 itL1Le> 

< Finolude file nelude/hneader asp > 


<TABLE WIDTH=”100%"7 BORDER="07 CERLTSPACING="1 CEILIPEADDING="17> 

<TR><TD BGCONOR > HETCHT=7207 
ONMOUSEOVER=”this.bgColor=’<%=bgclr4%>’;”ONMOUSEOUT=”this.bgColor=’<%=bgcilr 
2%>' > ><1IMG SRC "imadges/gb if WIDIN="20” HELIGHI=" 0 > 

<2ONHNREE /rorile a aot ion profiler SW/A /TD /TR 

<!--- 休 息 中 心 的 超 链接 为 profile.asp?action=profile, 跟 上 了 一 个 查询 串 ; 并 且 在 鼠标 放 
NN ~ 


<A HREE Drorile a action Cutomerinteo nD Nt/AS 


<2O ROE rorile dD rion en ngepass ene i iy/ 


<A HREF=”profile.asp?action=repass”>&gnbsp; 取 回 密码 </A> 


<A HREF=”profile.asp?action=goods”>&nbsp; 我 的 订单 </A> 


<A HREF=”profile.asp?action=addtocart”>&nbsp; 我 的 购物 车 </A> 


<AOHRER /Drorile a a ion receliveader emnDep Wh Ne /AS 


17. 6.2 个 人 资料 维护 


如 果 顾 客 单 击 左 边 的 “个 人 资料 ”按钮 , 将 会 在 右边 的 工作 区 中 显示 图 17-22 所 示 的 内 


个 
| 


料 
尊敬 的 用 户 ,我 们 向 您 承诺 : 你 的 信息 将 被 严格 保密 。 


用 户 名 : king 

会 员 级 别 : [普通 会 员 ] 

gmail : lingakingcom 
真实 姓名 : king | 
密码 提问 : how 
问题 答案: | | 
提交 保存 | 


图 17-22 个 人 资料 
以 下 代码 实现 “个 人 资料 的 链接 ”功能 。 


Case "customerinfo" 


response.write "<center><B><FONT COLOR=996633> 个 人 资料 </font></center>" 
customerinfo() 


以 下 代码 实现 取出 个 人 资料 信息 功能 。 


sub customerinfo() 
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I TeoUecst CooRkies ("timesanop, ("uoernamev =r enen mn 不 

IE 

response.End 

Sr et 

Set™ roe=ServerCreateoObyect ("adoodb recordSset”) 

\` 从 数据 库 中 和 奏 找 顾客 的 信息 

OvoODeEl SeeskEoseEmenmai ip oemnt liev ueoSLomn ealtnane Teon ser | we 
USernmname=s' ereouest COORKTeS( CIMOSSnoOD™  ) (USername yo MT Conne lel 

Dim Rank 

Rmnk 

Fi ro (vi re tnen 

Ren nn 员 放 

End if 

等 > 

<table align=center cellpadding=1 cellspacing=1 bgcolor=<% = bgclrl1l %>> 


<form dction= saveproftile aspractL On=ouUSstomer nko> 

ErS<EaH reouest Coo les (ue msonoD (ner naneu) es /to /CE 

<tr><td > 会 员 级 别 : SCD>< ont Coole HeoOGO00 > 0 Ranke > ione A 
< /ES 

和 <input name=useremail type=text id=useremail2 value=<% 
=EELM(ES ("USSeenalil")) S$>></ES</ErES 

< <Ea Neine=22 > HS 2 OU Nam — realnane VD Eee Te eedlnae 
Value=<$ = EelimM(re ("realnaneY) )$>></EcS</E™-> 

< < heront=28 mij ll TU name ouneston typeEext Td=oUesion 
Va le ST = Em eS Ion > /< > 


<tE><Eo nn name=anawer ftVDe text 1 dnswer S/o /ie 

二 
checkueerinton() >/ < /> 

< EOrm></ teale> 

<S% 

rs.close 

set rs=nothing 

end sub 

等 > 


以 下 代码 实现 问 数 据 库 中 保存 个 人 资料 功能 。 
CasemCSEGONEE EGG” 
Set Lo=SErVer CreateOb Teot( adodo recoGradset) 


rs.open "select useremail,realname,quesion,answer from [user] where 
USsSername='"&usSername&"'",conn,1,3 

` 以 可 写 方式 打开 数据 库 中 的 user 表 

ES( "USEremarl VY) =n(reo st torm( seremalrl.y,) 

rs("realnamer)=trim(reguest fOrm("realname)) 

ES SloOm = tL CES te orn( ne Lor 

if trim(request.form("answer"))<>""then 

re(" "answer =m (Erm(request, Form( "answery))) 

cence 


rs.update 

“更 改 各 修学 让 的 值 ， 并 且 召 余 保 存 

rs.close 

set rs=nothing 

Pesponse Weice oeriot Taguaoe = adver i > alert CC eH 辣 人 站 交 所 另 
je ld NC (a 
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17. 6. 3 ”修改 密码 
“修改 罕 码 ” 风 界 面 设 计 如 图 17-23 所 示 。 


图 17-23 ”修改 密码 


以 下 代码 实现 “修改 密码 ”的 链接 功能 。 


<TD elLenT 20 QOQNMOUSEOVER— thnis baqColeor= “<%= bgelre4s> 
ONMOUVUSEOUT “Ehis baColor = “=bagelr275> > 
<IMG SRC="images/SAVEAS .GIF" WIDTH="16" HEIGHT="1]16"><A 


HREE= "roOflile dopoaction cenangepdss" enDee SE YIy</A></ TDS 
Case "changepass" 


response.Write "<center><B><FONT COLOR=996633> 修 改 密码 </font></center>" 
changepass () 


sub changepass () 

i1f reouest .Cookies ("timesshop")( username")="" then 

Eesponse Weite ncenter /|</Center 

response.End 

end if %> 

<table width=96% border=0 align=center cellpadding=1] cellspacing=1 
bgcolor=#FFFFFF> 

<form name=userpass method=post action=saveprofile.asp?action=changepass> 

ee wien S00 nm "ne. 


<td width=50%><%$ 二 
edquest Cookies("t Iimesesnop'") (Username") ></font></to> 


<tr bgcolor=#FFFFFF> 
<td align="right"> 原 密码: </td> 
<td><input name=password type=password id=password></td> 
sw > 
<lr bacolorstEeEEEE > 
<td align="rightn> 新 密码: </td> 
<td><input name=passwordl1 type=password id=passwordl></td> 
ws ee 
<td align="right"> 人 确认 密 体 : </td> 
<td><input name=password2 type=password id=password2></td> 
和 
Ed colspan=2 bgcolor=#FFFFFF alion=" "eenter™"><1inout type=submit 


人 
</form></table> 
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修改 密码 的 请 求 通 过 表单 传递 给 Saveprofile' ap 处 理 ， 查 询 串 action 传 递 的 值 为 
changepass。Saveprofile.asp 中 的 啊 应 部 分 的 源 但 分 析 如 下 


case "changepass" 
Set Te=SSrvereCreateoObIeop( oadodD Eeeoordset,) 


rs.open "select Password from [userl where 
Username='"&uSsSername&"'", conn,1,3 
TT mo (rireoiest itorm( DasSSwo re Ve Sm (ee ( He te 


` 输 入 的 原 密码 有 诈 

response.Write "<script language=javascript>alert(' 对 不 起 ， 您 输入 的 原 密码 错 
TR ON( I tn 

response.End 

else 

rs("password")=md5 (trim(request.form("passwordl"))) 

\ 使 用 新 密码 ， 当 让 要 使 用 MD5 加 密 

rs.update 

rs.close 

set rs=nothing 

EeSpoOnse WEICO Moocriot | angduadge= vse lot lere( 0 To Be 
Ta tO Ou i 

response.End 

ore use 


17.6.4 取 回 密码 


如 果 顾 客 单 击 “ 取 回 密码 ”， 将 会 提示 根据 密码 提示 问题 和 管 膝 取得 新 密码 。 分 为 三 
步 : 先 输入 用 户 名 。 和 输入 正确 后 ， 显 示 密 但 问题 ， 要 求 用 户 输入 密 但 答案 。 密 但 答案 正 而， 
则 可 以 输入 新 密码 。 顾客 取 回 密 码 步 又 的 第 一 步 , 填写 用 尸 名 ,此 时 合 询 串 中 shop 值 为 空 。 


sub repass () 


dim shop 

shop=request .QueryString("shop") 

select case shop 输入 顾客 名 
Case wu 


response.Write "<pbr><table width=96% border=0 align=center cellpadding=01 
cellspacing=1>" 

` 输 出 供 顾 客 填 写 找 回 密 码 的 用 户 名 表单 

response.Write "<form name=shop0 method=post 
action=profile.asp?action=repass&shop=1>" 


下 


2 < Ti name=username type=text id=username 
size=16></div></td></tr>" 
response.Write WI | herght=32 ocolore=sH eit < 


Sc ene le Smt me me le Heme omnelleRk ecoen 
i A A A 
response.Write "</form></table>" 


用 户 取 回 密码 的 第 二 步 ， 此 时 需要 用 户 输 入 正确 的 密码 提示 问题 答案 ， 此 时 查询 串 中 
shop 的 值 为 1。 


case "1" ' 输 入 问题 答案 

Set eServer CreateOD Tect adodD EECOLrdsetn) 

rs.open "select quesion,answer from [userl where 
USermnane= "ot iMm(Leonest EOLrmMm( ername ee CoOmi Ed 


if rrS.Ee0f and rs.bof then 


response.write "<center><br> 便 无 此 顾客 ， 请 返回 ! </center>" 
else 
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response.Write SR width=96% border=0 align=center 
eelloadding=l cellopacing= Ll DIOCOoOLoOr=#EEEEEE>Y 
response.Write "<form name=shopl method=post 


action=profile.asp?action=repass&shop=2>" 
PesDOroee Wr te Vt to Wh 2 ol ADDLENG EET 


20px'> 您 的 密码 提问 : </td><td width=79% height=28 bgcolor=#ffffff 
STYLE="PADDING-LEFT: 200x SEEwnk COLOrF=Te0> otiIn(Ee ("Oueston oe < /ont> 
<input type=hidden name=usernamel value="&trim(request.form("username"))g&" 


LD=iddeml to /er 
人 
的 密码 答案 : </td><tdheight=28 bgcolor=#ffffff STYLE='PADDING-LEFT: 20px'><input 
name=answer type=text id=answer></td></tr>" 
response.Write We Boeolors 人 te efter et height=32 colspan=2 
SS 三 ADDINe Timi 0 nu oo Soule mame oun 2 ale /en 
Smelliek er eneekd .> Eo > Aer > 
response.Write "</form></table>" 
end 1if 
rs.close 
set rs=nothing 


现在 用 户 的 密码 提示 问题 的 答 采 已 经 回答 正确 ， 可 以 让 用 户 输入 新 的 密码 。 查 询 串 中 
shop 的 值 已 经 变 为 2。 
case "2" '! 输 入 狐 密 人 码 


set re=Server CreateObJecb( adodo. recordSset”) 


rs.open "select answer from [userl where 
USername= etrinm(reouest torm( Seriiamel eT COnmeL: 

if trim(rs ("answer") )<>md5 (trim (request .form("answer"))) :判断 答案 是 否 正 确 

then 


Pesponse Weiter MM cooript laneoudae JavaSseript lene a Mi 和 辣 冲 

答案 不 正确 ') ;history.go(-1);</script>" 
response.end 
else 

response.Write vr ><babdle width=96% border=0 align=center 
cellpadding=1 cellspacing=1 bgcolor=#FFFFFF>" 

response.Write "<form name=shop2 method=post action=saveprofile.asp? 
action=repass>" 

response.Write "<tr><td width=20% bgcolor=#EFFSFE STYLE="'PADDING-LEFT: 


20px'> 请 输入 新 密码 : </td><tqd width=80% height=28 bgcolor=#EFFS5FE 
STYLE= "PADDING-LEFT: 2 name=userpasswordl type=password 


id=userpasswordl><input type=hidden name=username2 value=" & trim(request.form 
("usernamel1"))&"></td></tr>" 

ESDoOSe Wie "E> END Coblor= 人 HBr SIEE PADDTNG TE 0 > 
输入 确认 密码 : </td><td height=28 bgcolor=#EFF5FE STYLE='PADDING-LEFT: 
20px'><input name=userpassword2 type=password id=userpassword2></td></tr>" 

response.Write HE EE 人 Colspan=2 bgcolor=#EFF SFE 
emVviE= ADDING Tr 0 nt cooe cubmit vam enum oo vole ene 
Ome ek err Cee Se > 

response.Write "</form></table>" 

end if 
rs.close 

set rs=nothing 
end select 

end sub 


17. 6.5 “我 的 订单 ”界面 
“我 的 订单 ”界面 提供 给 顾客 便于 目 己 的 订单 管理 ， 界 面 如 网 17-24 所 示 : 
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| -请 选择 查询 状态 -- 可 | 
合计 金额 积分 订货 付款 方式 收 货 方 式 订单 日 期 订单 状态 
200441394427 | 14512 元 king | 建设 银行 汇款 2004-4-13 9:44:27 | 订单 处 理 中 


2004411193934 | 33 元 1 | king | 建设 银行 汇款 2004-4-11 19:39:34 订单 处 理 中 | 
20044911922 | 11223 元 | 110 | king | 建设 银行 汇款 | 特快 专递 CEMS》 | 2004-4-9 11:09:22 订单 处 理 中 | 


图 17-24 订单 管理 


显示 用 户 订 单 主要 由 下 面 的 子 过 程 完 成 ， 程 序 完成 从 数据 库 中 维护 的 订单 表 中 取出 用 
户 的 订单 ， 并 且 做 一 些 简单 的 统计 ， 例 如 订单 的 “合计 金额 ”项 。 

sub goods () 

` 奔 找 顾客 的 订单 的 子 过 程 

if reouest cookies( timesshop’)( "username’” y= 4 then 


Fesponse neice <center Center Mo < /ceneer < /Cener 
response.End 
end if 


<! 一 -在 顾客 改变 列表 中 的 选择 时 触 友 onchange 事件 ==> 

<select name=” state” onChange=”var ]mPUREL= 
this.options[this.selectedIindex] .value 2 (UR = ) 
{window. Jocation JmoeURL:} else lilthnis.selecetedIindex=0 > > 


<opEionm vy lu /Prorile Sp dion go0dsceatate 0 Selected | 人 A 
==</oPDELoOn> 
在 
<opeion yal oreorile es tlion goodsese de TJ/ RI EN /oelonS 
人 <option lve rorile a don OoooseS tae ?7 0 EL /olion 
< 
人 
和 


<table width=" 100%7 border=”0" align=”center” celleaddmngs= 2 
cellspacing=”1” bgcolor=<%=bgclrl1l%>> 

<!-- 列 表 显 示 所 有 的 订单 ， 依 据 碍 询 状态 --> 

<TSeLrs=SsServerCreateOb ect (adodbD.recordset”) 

dim state 


SEE) ` 根 据 选 择 的 状态 作 查 询 

Tae 00 ore /nen ` 显 示 全 部 订单 

select case state 

case “0” 

re OBEen Select distinct (goods),realname,actiondate,deliverymethord, 
paymethord,state from orders Where username=’”&request.cookies (“timesshop”) 
(USername ye angd state<6 orderbyactiongdate dese eonnmne lel 

Case 、”“ 

re OPEen Seleee distinct (goods),realname,actiondate,deliverymethord, 
paymethord,state from orders Where username=’”&request.cookies (“timesshop”) 
(USerneame’ ye and state<6 order By actiondate dese” conne Le 1 

end select 


ese \` 显 示 指 定 的 订单 状态 的 订单 
SoOpen "select Qstinet (go0ods) realname .act iOondater deliverymethorgd, 
Paymethord, state from orders where username=’”&request.cookies 
(“timesshop”) (“username’”)&”’ and state=”&stateg&” order by actiondate”,conn,1,1 
end if 
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dt 


eh ee 列表 显示 
$> 
a oll oe eng Ae ge 
< lm Shopr rs 
set shop=Sserver CreateoB ect (adodb ecerqdse 9 
shop.open “select sum(paid) as paid,sum(score) as Score from 2 where 


goods=’"&trim(rs (“goods”))&” “,conn,1,1 计算 出 订单 中 所 有 此 种 商品 的 总 金 


9 
> 


` 单 击 订单 号 打开 一 个 到 订单 的 链接 ; 可 以 但 看 订单 的 状态 和 详细 信息 ， 并 且 可 以 删除 订单 。 


<td><a href=# onClick=”javascript :window.open 
(‘chkorder.asp?dan=<%=trim(rs (“goods”))%$>&score=<% = 
CO SW = 7 OLmt S00 toOolar no status=no, 
menubar=no, resizable=yes, scrollbars=yes’);return 


false >< tim(Es( ooo) /K/L 


<td><% 计算 出 总 共和 需要 付 的 费用 ， 包 括 商 品 的 价格 和 不 同 送 货 的 方式 的 颖 用 的 和 


Set rs2=server.CreateObject (“adodb.recordset”) 


rs2.o0open SSIESGE from el ryery where deliveryid=”&rs 
(人 和 

response.write “<font Golor= tre600 > ne Do tr eer 
A ol he 


rs2.close 
Set rTS82=—nothing 人 多 op 


J 页 客 所 购 的 是 大 件 商 品 ， 军 无 疑问 需要 对 这 些 顾客 的 购物 已 更 好 的 待遇 。 顾 客 的 
积分 吕 是 这 样 的 一 种 标记 VIP 顾客 的 撞 施 。 


ER = Sno( VM SCOrLE) TF 
< shop.close 


set shop=nothing 
$s></td><td><%=trim(rs (“realname”) )%$></td> 
<tod><TSoet PoZ=SSerVvVeryvC reateob eect( “adodD ecoordeset ss,) 


rs2.open “select 人 EO delivery where 
el rer Eon( Ov to ) ooOmi Ll 
response.Write trim(rs2(“subject”)) ` 查 询 出 顾客 选择 的 付 球 方式 


rs2-CLOSe 

Set TS2 mothindgs></to> 

<td align=”center”> 

< 地 Set rs2=server.CreateObJject (“adodb.recordset”) 


rs2.o0open “select 人 SO delivery where 
eT er ES el ver yn to om 
TEN ` 人 查询 出 顾客 选择 的 送 货 方式 


ES2 CEOSe 
set rs2=nothing%> 


< 七 @> 

<td><gs=trim(rs(vactiondate”) )s$></ 人 td> <1-- 顾 和 客 最 近 一 次 购物 活动 的 时 间 --> 
<to><Soelect Coase rol( Veto tee) ` 订 单 的 状态 
CS I 

Fesponses weite wR 作 侍 何人 人 7 

CSE 2 

response.write \ 订 单 处 理 中 ” 

Casen 3 

response.write “服务 疝 收 到 球 “ 

Case A 

response.write 服务 商 已 发 货 ” 

Case 9 


response.write "顾客 已 收 到 贷 "“ 
ET ee > 


</td></tr><% 
rs.movenext 
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loop 

rs.close 

set rs=nothing%></table> 

<%Send sub 

sub loornnum() ` 统 计 特 定 顾客 的 登录 次 数 

nme ue 

url=Request .ServerVvariables ("HTTP_REFERER”) %> <!-- 取 得 url1， 因 为 统一 定向 到 


chkuser .asp 来 检查 顾客 用 来 设置 comeur1， 方 便 成 功 后 重新 转向 请 求 页 --> 


17. 6.6 购物 车 的 实现 
“我 的 购物 车 ”的 界面 设计 如 图 17-25 所 示 。 


我 的 收藏 染 
商品 名 称 折扣 


克 | 充气 玩偶 1489 元 1450 元 97% 向 
| 克 soNY nsc-v1 6600 元 5600 元 85% 市 


| 去 下 订单 | 


图 17-25 ”我 的 购物 车 
左 部 的 菜单 栏 中 响应 “我 的 收藏 来” 的 代码 : 


Case "addtocart™" 


response.write"<center><B><FONTCOLOR=996633> 我 的 收 藏 架 </font></center>" 
addtocart () 


disuser.asp 中 的 sub 字 过 程 addtocart0) 处 理 商 品 添 加 到 购物 车 子 过 程 的 管理 。 


sub addtocart ()  “ 谎 加 到 购物 车 子 过程 

Set rs=Server,CreateOBJect ("adodb ,recordset™) 

rs.open SEE orders.actionid orders LId Preoduct nanme 
Broduct oricel roduet ricCe2 ,Prooduct ealseount freonmporoduot inner JOlnmnorders 
on Produet Ld=OrdersesLd where orders.username='"&request .cookies 
("timesshop") ("username")e&" and orders.state=6", Conn,l1,l1 


和 > ` 连 接 product 表 和 orders 表 , 从 中 选择 该 顾客 订购 的 订单 的 商品 的 详细 信息 

<table width=96% border=0 align=center cellpadding=0 cellspacing=1 
lOcCoOlor=H66900C0> 

<% 


判断 是 何 处 调用 addtocart 子 过 程 ， 在 addto.asp 文 件 中 即 收藏 商品 时 也 会 调用 这 个 子 过 
程 。 如 果 是 从 顾客 中 心 调用 的 这 个 子 过 程 ， 那 么 提交 时 会 打开 一 个 狐 的 浏览 吉 窗 口 ; 否则 
如 果 是 收藏 商品 是 调用 的 这 个 子 过 程 则 只 需 将 设置 表单 的 啊 应 页 为 cart.asp 即 可 。 


if action="addtocart™ then 


\ 此 处 定义 了 form 标 单 的 action 页 为 cart .asp; 如 果 顾 客 单 击 取 下 订单 ; 则 会 转 全 cart .asp 


response.write < OT act1ion— Carte asp target=shop 
Onsubmit=" "Iavaseriet winNdeow oPem(' width=632 henant=388, Eoolbar=no, 
status no > Mengobar no ,reslzoble ves Sorolloars — yes ) > > 
else 


response.write "<form name='forml' method='post' action=cart .asp>" 
encnif®> 
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可 交融 扑 旺 荐 并 小 


所 
Lb 


汉 


DreaomwWearer SS 中 立 版 信 门 与 提高 实例 条 


下 面 的 代码 显示 收藏 夹 哩 的 所 有 商品 ， 并 县 使 用 checkbox 来 标记 需要 删除 的 商品 。 如 


果 被 check 的 话 , 束 以 为 这 可 以 删除 这 条 订单 。 授 历 记录 和 集中 的 所 有 数据 ， 每 一 个 checkbox 
的 value 都 使 用 记录 集中 的 id 编号 来 标记 


二 WEDEETS 人 OOE 汉 > 

<tr bgcolor=#ffffff align=center> 

<td><input name=id type=checkbox checked value=<% = rs("id") $%>></td> 
<to STYLE "PADDINCGC=LEEL: 5px "al1ion= 1eftt><“2 href—product asp?id=<» = 


S(Tid" > tardget lank> < Toal( mname) S/d></Ee> 
el (Ee el 


ee Color=H E00 (2 ) 有 

<EOF><S SS PS(VONSGOOUMEY) 10O0 省 码 务 雪 思 EGG 芭 

< 七 Q> 

<S% 

` 判 断 是 何 处 调用 addtocart 子 过 程 ， 在 addto .asp 文件 中 即 收藏 商品 时 也 会 调用 这 个 子 过 程 


1 GaoliOnMn<>Wacleocsam. nen 


response.Write We 
nret=addto asp acCLron=delveocCt LOoOnnd= = oreo( Ct Lon 6 > 
else 
response.Write "<a 
nrets=saddto waspact lion=delSsact ronid "eure( act onigd.) &"&11=22>" 
` 每 条 记录 的 删除 的 超 链 接 设置 
ene 


response.Write "<img src=images/trash.gif width=15 height=17 border=0></a> 
Ie A 


rs.movenext ` 过 历 顾客 的 订单 表 中 所 有 的 未 处 理 的 订单 

loop 

rs.close 

set rs=nothing 

response.write ee height=36 colspan=6 bgcolor=#FFFFFF><div 
align=center><input type=submit name=Submit value= 2 a Dy 


单 >&nbsp; &nbsp; &nbsp; Enbsp;" 

Tt On oa te 

FeapDonse Weiter nu Evoe Btton nem Suonit > walue one i a 
SOL Ut WW eese 一” 

ET 

$> 

ROW 

<S% 

end sub 


当 顾客 在 “我 的 购物 车 ” 单 击 “ 去 下 订单 ”按钮 后 ， 会 进入 下 一 流程 ， 本 章 17.7 节 有 
详细 的 分 析 。 


17. 6.7 收 代 人 信息 


“ 收 贷 人 信息 ”的 界面 设计 如 图 17-26 所 示 。 
下 面 代码 完成 的 功能 是 实现 上 和 耐 的 显示 界面 。 


end sub 
sub receiveaddr () ` 这 个 sub 子 过 程 完成 的 是 显示 收 仙人 的 详细 信息 
dim rs2 
I COO le es oD re ee \ 顾 客 名 为 宇 ， 要 求 登 录 


Fesponse WeliCe LE /< /Center 
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收 货 人 芒 息 
请 您 填写 正确 的 收 货 作 信 息 ,我 们 会 为 您 保密 。 


收 货 人 姓名 : |  ” 己 别 : 册 司 
收 货 人 省 市 [ 

详 Ib 直 : [，， 
邮 编 乒 

电 话 记 

手 机: [277642 | 

腾讯 ma : [26222 


适 货 方式 : 


| 交通 银行 汇款 
支付 方式 : 邮局 汇款 
网 上 支付 


提交 保存 | 


图 17-26 ” 收 贷 人 信息 


response.End 


engmift 

set rs=Server.CreateOb ject (“adodb.recordset”) 

ES ODEn seece EECepPIt recepit City ,address DOSteCode USertel, 
mobile,usergqq, deliverymethord,paymethord from [userl] where 
USername=/ “tredquest. Cookies(“"timesshop’”)( “Username Ye VY oonn,. | 

%> <! 一 -从 数据 库 中 取出 此 顾客 的 收 货 人 详细 信息 
一 一 > 

<f Or name=receliveaddr method=post action=saveprofile.asp?action 
=receiveaddr> 


<td widthn=18% STYLE="PADDING LERT: 10Bx’S 收 信人 姓名 :</td> 
<td width=82%><input name=recepit type=text id=recepit size=12 value=<% = 
trim(rs( receBit )) <>> 


i 
<td><select name=deliverymethord size=5 id=deliverymethord> 
<S% 
set rs2=server.CreateObject (“adodb.recordset”) 
ES2 .0Ben “selecb* fromdelivery where methnord=0 order Dy deliveryidorder’, 
Gonm, l,l ‘delivery 表 中 methord 为 零 的 为 送 货 方式 ， methord 为 1 的 为 付款 方式 
dowwhile motr 7S2° EOF 
response.Write oPpELon value= Srs2("deliveryro RE- 
(Sueets) </ ot on 
rs2.MoveNext 
loop 
F882.Cl1O8e 
等 > 
<Select> 


本 > 
<S% 
rs2.0pen Seect A from delivery where methord=1 order by 
deliveryidorder Conm. lol 
do whnle mor TS2000O0F 
response.Write <oPBE lon value=" grs2Z("deliveryvid )Sg > Strim(rs2 
(elon ee in 
rs2.MoveNext 


365 


- 漆 训 浪 次 型 由 旺 ”如 L1 波 


三 


\NS 
dy 


| 


站 D> 


例 


DreamRERRER LS 中文 般 入 门 与 担 高 实例 条 


loop 

rs2.Close 

set rs2=nothing 

等 > 
EEC 


<S% 

8.ClOose 

set rs=nothing 
end sub 


17.7 收藏 和 购买 商品 


收藏 和 购买 商品 是 一 个 购物 站 点 的 核心 功能 。 其 中 收藏 即 是 与 顾客 中 心 同样 的 调用 
disuser.asp 中 的 addtocart() 子 过 程 ， 购 买 则 有 所 区 别 。 


17.7.1 浏览 商品 


浏览 商品 有 多 种 情况 ， 例 如 “分 类 浏览 ”模块 或 者 “ 狐 品 上 架 ” 等 等 模块 都 需要 商品 
的 浏览 功能 。 图 17-27 是 截取 的 分 闫 浏 览 中 的 某 一 个 商品 的 显示 。 
商品 名 称 : soNWY DSC-VY1 


日 日 由 ， en 和 开口 ， 
商品 品牌 : SONY 商品 型 号 : 


商品 简介 : SO DSC-Yl (2003 量 新 款 ) 


上 市 日 期 : 2003 年 01 月 训 览 次 数 : 3 商品 等 级 : 精 品 
会 员 价 : 时 5600 元 折扣 : 8. 5 折 


图 17-27 catasp 中 列 出 的 某 一 商品 


disuser.asp 源 人 码 中 的 addtocart0 已 经 论述 过 , 此 处 略 过 。 下 面 分 析 “ 购 买 ” 的 源码 : cat.asp。 
cat.asp 是 商品 分 类 的 列表 ， 其 中 每 种 商品 都 有 “购买 ”和 “收藏 ”两 个 选项 。 


<I= #1incelude file="Conn.asp”—=> 
“1 #1inmnClude file "eonfig .asp > 
<$% 


dim Seorts1lc,1, Strcat 

sortesld = readuest Suervetring( catid)%> 

< 上 title><gs=webnamesgs>-- 商 品 分 类 </tit1Le> 

<1 inelode itile incelude/hneader dS > 

<S% 

` 从 数据 中 的 分 类 表 中 选 出 此 分 类 的 商品 的 分 类 名 称 

set rs=server.CreateObject (“adodb.recordset”) 

ES OPemY select category from categoryv wherenqcecategoryid= SSsortesioe 
Joonm, J 

有 ` 取 得 分 类 的 名 称 

rs.close 

Set TS —Nothing 

%$> 


rs 记录 集中 存放 的 是 categoryid 等 于 相应 的 id 的 分 类 。 如 果 没 有 指定 sortsid， 则 从 所 有 
商品 中 选择 最 新 的 20 个 商品 并 列 出 之 ; 否则 从 数据 库 中 选择 指定 分 类 下 的 所 有 商品 并 列 出 
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之 ， 并 且 按 照 商品 的 添加 时 间 排 序 。 


lif oortedad then 
set rs=server.CreateObject (“adodb.recordset”) 


rs open “select top 20Prename comoanve mark, DIetvODer. INnLrO OLNer Eyvee, 


viewnum,grade, predate,1id,name, introdUuce,. Pricel, Brice2,discount, productdate, 
BliC freom produyuet orderby adQdddate dese” ?Eomnn, 1 | 
else 
set TS=Server.CreateOb ect/( adodb recordset’) 
rs.open “select predate,prename,company,mark,pretype,intro,name, 
other Lye viewn orade io Introduee .Bricel priece 2 dlscoeount ,product dater DL 
fromorodut where oategqoryid= sortsidge order by adddate ldese coonn Il 1] 
end if 


cart.gif 是 购买 图 标 ， 上 和 面 的 代码 说 明 ， 当 顾客 单 击 “购买 ”是 在 打开 cart.asp 同 时 ， 商 
品 的 id 也 会 作为 得 询 串 被 传递 ， 下 面 会 进入 购物 流程 的 第 一 步 。 如 采 放 入 购物 车 ， 则 可 以 
继续 采购 ， 最 后 统一 到 顾客 中 心 处 理 购物 车 中 的 内 容 ， 如 果 单 击 的 是 “下 一 步 ”， 则 进入 
购物 流程 的 第 二 步 。 


< > <a href=# onClicek—" Javaseript :window oPen( cart ee as as 二 = 


RS eel) > widtn=632,. heliohnt = 3388 toolbar=no, status=no, menubar=no, 
resizable=yes, scrollbars=yes’);return Foalse> >< Tmo 
Sre— imadges/ Skin/default/cort of width=50 height=19 align=absmiddle 
Borgader 0 /3 /to 

| colspan=”2”><a href=# 
onClick=”Javascript:window.open(‘addto.asp?id=<% = 
SET >&action=add’ "widthn=0632.heiont=388, Loolbar=no, status=no, 
menubar=no. reslzable=yvyes /Serollbars=vyes’ ) .ret ur False "><1mo 


sre—imades/ skinmn/ default/ odo olf width=50 height=19 align=absmiddle 
Boerder=0></a></td> 


下 和 面 省 略 的 都 是 在 前 面 技 术 细 市 已 经 论述 过 的 分 页 列表 的 代码 ， 只 是 记录 集 有 所 不 
同 ， 所 以 都 已 略 去 ， 评 细 的 代 公 读者 可 以 参见 ” 源 代 人 码 ” 文 件 夹 。 


< Hineolude file "nelude/footer ap 


17. 7.2 购买 商品 


购买 商品 分 为 儿 个 步 纤 ， 并 且 存 在 两 种 方式 。 一 种 方式 足 把 商品 首先 放 入 购物 车 ， 然 
后 统一 购买 ; 另 一 种 是 直接 购买 选中 的 商品 。 直 接 购买 选中 的 商品 时 ， 第 一 步 需要 选中 所 


要 购买 的 商品 ， 单 击 “ 商 品 浏览 ”部 分 的 “ 购 严 ”后 ， 系 统 会 璋 出 如 岁 17-28 所 示 的 界面 。 


市 场 价 会 员 价 ”折扣 ”WIP 会 员 价 数量 积分 小 计 ”修改 数量 


仙境 传说 RO 30 元 | 26 元 36% 25 元 外 1 分 | 26 元 修改 
你 是 普通 会 员 。 ”费用 总 计 : 26 元 ， 获 得 积分 : 1 分 


图 17-28 ”购买 流程 的 第 一 步 


如 界面 设计 中 的 图 所 示 ，cartasp 将 顾客 要 购买 的 商品 列 出 。 


1if reouest OUeryString( Ld”")="" then 
1d=PeEOUeSt form( Ld”) 
else 


ie=redUest ouervor rindg( Vier ` 取 得 商品 id 的 值 
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革 团 痊 副 路 咀 ” 直 LI 沂 


DreaomwWearer SS 中 立 版 和 信 门 与 超 高 实例 条 


select case action 
Case WAIr 


根据 action 的 值 采 取 相 应 的 动作 ， 根 据 分 析 cat.asp 发 现 请 求 串 是 如 下 的 形式 : 
cart.asp?id=389， 故 此 时 action 为 至 。action 为 至 的 情况 下 ， 主 要 也 是 列 出 商品 的 一 些 信息 ， 
代码 多 与 技术 细节 中 的 列表 差别 不 大 ， 故 省 略 之 。 


Set re=Server readateoObm ell seoaeeseeeoradese 

FSevoDen “oceleGet To ma ELC CC Vi Elo LSCOUNnt SooOre Stocok tronm 
PEoduct whieree Te Ime Spe eon \ 根 据 此 商品 的 id 列表 显示 详细 信息 

< height=”32” CoolisEan= 9 align=”center”><input type=”submit” 
ame= Submit2 ot yle=s not 0 tont Pt EORDER BOTLEIOM EREERR I ove 
BORDER=—RIGRT EEERFE ToxX rooVve, BACKGROUND COLOR < "bo9elr -> Value=s” 
ne on Sh Ls el 
a Om mil 


如 果 顾 客 单 击 “下 一 步 ”， 将 会 再 次 请 求 cartasp， 碍 询 串 的 内 容 改 为 cart.asp?action= 
shopl&id=389; 这 是 判断 case 的 信 将 六 为 Shop1, 故 会 进入 Select case 语 句 的 另外 一 个 分 文 。 如 
果 顾 客 单 击 的 是 “ 放 入 购物 车 ”， 则 会 请 求 addto.asp?id=389&action=add。 


< Dooksoount=1 ENnens> 

A type=”"button” name=”Submit22” style=”height:20; IE 
BORDER—-BOTTOM: #EFFFFFF lpx groove; BORDER-RIGHT: #EFFFFFF lpx groove; 
BACKGROUND-COLOR: <% = bgclrl | 
onClick=”location.href=’addto.asp?id=<%=books%>&action=add’’”><%end if%></td> 


直接 购买 商品 的 第 二 步 需要 顾客 填写 详细 的 收 仙 人 信息 。 以 下 是 实现 该 界面 的 代码 。 


Gace “HoBl 久 胃 十 己任 十 交 过 交 晤 如 攻 RS 

SEE 人 ceEaacoao eeceorosee) 

rs.open senkelee eeSepbTk Userid Sex ruseremall eye address, 
postcode,usertel,paymethord,deliverymethord,realname from [userl where 
UsSername=’”&request.cookies (“timesshop’”) (“username”)g&”’”,conn,1,1 


userid=rs (“userid”)%> <!-- 首 先 选 出 顾客 的 详细 信息 ， 取 得 顾客 的 id 放 到 userid 中 。 


i 


<!-- 新 的 表单 ， 请求 的 urz1 变 为 cart .asp?action=ok&id=387&userid=2。 这 样 再 次 提交 是 
将 进入 男 外 的 select 语句 的 分 支 。---- 

< OT ee method=”post” action=”cart.asp?action=ok&id= 

$=jd%>&userid=<%=usSerid%>”> 

SEt SZ=SEPVEeEr CreateoODJect (adodb ecoordset) 

FS oDer ooleet MM trompPro eb Wnerem re nm GC Lo Oler or Lo CoOr 

Gowhaeler mo rs 2 

$> 

<iInput names <%= SNOB tres2Z( id ys> tyDe=" hidden value= “<=C1int (reouest, 
En SO eS ( LO > 

<S% 

rs2.movenext 

loop 
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上 S2 .CoSsSe 委 > 

<!-- 利 用 隐藏 域 来 传递 一 些 信息 是 基本 的 Wep 编程 技巧 。--> 

<input type=hidden name=realname value=<%=trim(rs (“realname”))%$>> 

<td width=”150” style=’PADDING-LEFT: 6px’><b> 收 货 人 姓名 : </b></td><tdqd 
width=”600” height=”28”><input name=”recepit” type=”text” id=”recepit” 
中 FE 2 value 6 Erim(res( Fecepit 一 


<!-- 顾 客 填 写 收 货 人 的 详细 信息 ， 当 然 首 先 会 从 数据 中 选 出 相应 的 登记 过 的 顾客 的 信息 ， 已 加 快 
hull ale < rs( s(n 


<tr bgcolor=<%=bgclr3%>><td></td> 
<td><input tyee Submit name Submito style hneragnt > 2200 font :op 
BORDER—-BOTTOM: #FFFFFF lpx groove; BORDER-RIGHT: #EFEFEFFEE "Px groove, 


BACKGROUND-COLOR: <% = bgclrl %>"value=” 提 区 订单 “"” onClick=”"return 
soeoEhner() /SS</Ed></Er></LoOrm> 


当 顾 窜 单 击 【 提 交 订 单 】 按 钮 时 ， 此 订单 将 会 提交 给 cart.asp?action=ok&id= 
387&userid=2。 和 程序 的 控制 流程 将 会 转移 到 另外 的 一 个 分 文 继续 执行 。 如 果 顾 客 填 写 的 信 
居 都 合法 正确 ， 那 么 会 转 到 订购 成 功 界 面 ， 如 图 17-29 所 示 。 


17. 7.4 订单 提交 
订 早 提交 设计 界面 如 图 17-29 所 示 。 


芥 喜 king， 您 已 成 功 的 提交 了 此 订单 ! 详细 信息 如 下 : 
订单 号 : 2004411193934 
商品 列表 : 
商品 名 称 小 计 
2 5 元 分 26 元 
您 选择 的 送 货 方 式 : 普通 平邮 附加 费用 : 12 元 共计 : 38 元， 赠送 积分 : 1 分 
订货 人 姓名 : king 
收 货 人 姓名 : king (先生 ) 
收 货 详细 地 址 : king street 


邮编 : 100000 ”电话 : 3828223 ”电子 邮件 : kina@kine. com 
送 货 方式 : 普通 平邮 支付 方式 : 建设 银行 汇款 


Eri4 [2 
您 的 留言 : :) 


请 您 在 一 周 内控 您 选择 的 支付 方式 进行 汇款 ， 汇 款 时 请 注 明 您 的 订单 号 ?汇款 后 请 及 时 通 
知 我 们 
付款 方式 


关闭 窗口 订单 完成 创建 时 间 : 2004-4-11 19:39:34 
图 17-29 ”订购 成 功 


以 下 代码 处 理 订单 提交 的 请 求 , 如 果 订 单 符合 要 求 , 则 订单 信息 入 库 并 显示 成 功 信息 ， 
侍 则 提示 出 错 信息 。 


Case “ok” 
Fanet Lom Imecoaee2 (tStEr md) 
tot rnin oPeplace (rotramno Cn 
orine peplace(Forr Iino eu EC 10 < /PRP><P>", 
Tor eplace (tot ean CHR(IO YY < ER>) 
HIMLEncode2 = fString 
end function 


Select 语句 新 的 分 文 ，action=ok; 值得 一 提 的 是 上 面 的 HTMLEncode2 函 数 ， 实 现 了 一 
些 特殊 字符 的 蔡 换 。 因 为 在 TextArea 中 的 输入 会 涉及 到 换行 和 回 车 的 问题 。 转 换 到 HTML 
输出 显示 时 ， 为 了 如 条 顾客 在 留言 一 栏 留言 ， 在 管理 员 浏 览 以 一 HIML 编 但 的 方式 显示 出 
来 。 例 如 顾客 输入 的 回 车 符 等 ， 采 用 的 办 法 就 是 将 CHR 〈10) 符 换 为 HIML 中 的 <br>， 这 
就 会 显示 出 回 车 的 效果 ， 完 全 符合 顾客 输入 的 格式 化 输出 。 


if session(“myorder’”) <>minute (now) then 
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es: 


DreconERERTLSS 中 立 版 信 门 与 提高 实例 条 


ri 

shijian=now () ` 取 得 当前 的 时 间 

Set roe2— Servers CreateObJecot( Vado recordeset,,) 

rs2.0pen “select id,name,score,pricel,price2,vipprice,discount from 
BEoduere meee or (eas er \ 取 得 商品 的 价格 、 折 扣 等 信 
[Hl 


/DA 


goods=year (shijian) tmonth (shijian) &day (shijian) &hour (ShiI]Jian)&miInut 
e (shijian) &second (shijian) ` 订 单 表 中 会 有 一 个 字段 存放 订单 的 时 间 ， 这 就 是 goods 的 目 
的 


do whnle not ESe2Z. .eofSset roe=Sserver ,CreateoOb eect ( adodb recordset’) 
swoon se emonelens een 


rs.addnew ` 回 订单 表 中 插入 数据 
Ss( username”)y=trim(request .Cookies (timeseshop ) (username )) 
ee \ 商 品 id 号 
人 \“ 时 间 
S( DEGOIEEnNUm CIN (eest toOrmn( eno (Ee) “商品 数量 
s (“state”)=2 "订单 的 状态 
s (wgoods’”)=go0ods ` 订 单 的 日 期 取 成 的 学 符 串 
有 \ 邮 政 编码 
S(OBlt rmt eot to En Leet) \ 收 件 人 
sadadress J) = Erum(reGu st orm addreses’ )) ` 地 址 
Sl avmnethore In (eest Form avnmetnore)) Vz 人 | /J 
ee 二 
Si Sex VI TNE(reouest orm(™ ocx) ` 性 别 
S 


i =HIMLENcode2 (trim(request.form(“comments”))) 


rs.update 
rs.close 
set rs=nothing 


下 面 这 行 代码 很 明显 地 删除 了 订单 中 的 顾客 名 与 顾客 的 id 相 同 并 且 状 态 为 6, 且 商 品 的 
id 写 符合 的 纪录 。 


Conn.execute “delete from orders where username=’”&request.cookies 

全 
rs2.movenext 

loop \` 循 环 过 历 

F832 .C1OSe 

set rs2=nothing 
` 重 置 会 话 myorder 的 时 间 ; 从 下 和 面 的 else 语句 可 以 发 现 session 的 目的 是 为 了 避免 顾客 重复 提交 

session(“myorder”)=minute (now) 

else 

response.Write “<center> 您 不 能 重复 提交 ! </center>” 

response.End 

oe 

` 下 面 的 代码 已 经 转移 到 了 处 理 购物 的 第 三 步 ， 即 订单 提交 成 功 后 。 这 时 就 需要 打印 出 整个 订单 。 


Sd oe 在 是 够 的 话 , 将 此 次 购物 的 必用 扣除 ; 如 来 人 不够 ， 
或 者 没有 和 存款， 那么 就 提示 顾客 在 一 周 内 按 其 所 选择 的 方式 付款 。 同 时 累加 相应 的 顾客 积 


\ 
0 


Setcsqeccs=server CreateOceece adodb recordset”) 

rsdeposit .open “select deposit,score from [userl where 
USeErname= Crecouest CoOoKLes( Limesehop (USername ye conn LL, 3 

if rsdeposit.eof and rsdeposit.bof then 

strtxtdeposit=” 请 您 在 一 周 内 按 您 选择 的 支付 方式 进行 汇款 ， 汇 款 时 请 注 明 您 的 订单 号 ! 汇款 
后 请 及 时 通知 我 们 ” 
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else 

strdeBposit Cling(rsesdeposit( deBposit’”)) 

if Strdeposit>sum then 

rsdeposit (“deposit”)=strdeposit-sum 
rsdeposit (Seore”)=rsdeposit (eCcore”)tesums2 
resdeposit .Update 


<S\ 对 已 售 出 的 纪录 加 一 ， 对 库存 减 一 。 跟 踩 销售 业绩 ， 并 且 在 顾客 购买 商品 时 判断 是 人 否 已 经 售 衬 
Set rs=server.CreateObject (“adodb.recordset”) 

rs. Opem “select solded stock from producet where QQ oonn ,3 
do while not rs.eof 

rs(“solded”)=rs(“solded”)+1 

8 (VCO) SRS (VO )=L 

rs.update 

rs.movenext 

loop 

8. CLOSE 

set rs=nothing 


<! 一 使 用 JavaScript 正则 表达 式 来 验证 顾客 的 输入 是 人 否 合法 --> 
<script language=javascript> 

1 

umet ron eglinout (oD "reo > nputSstre,) 

{ 


Var docSel = document .selection.createRange ( ) 

if (docSel.parentElement () .tagName |!= “INPUT”) return false 
oSel = docSsel.duplicatel() 
oSel.text = ™” 
var srcRange = ob]j.createTextRange ( ) 


oSel. setEndPornt (SEartloSstart SecRanmoe) 

varstr oSel Lext oP moutotCe ht StepRamoge texte Substr (oel text elengetnm, 
return reg.test (str) 

| 

// 这 是 使 用 正则 表达 式 验 证 顾客 输入 ; 技术 细 市 中 有 和 叙述 。 


function checkspace (checkstr) { 


VarSster 9 , 
for(1i= 0 1 cneckstr lergthn: 1+t1+) 1 
SEE =o. 
} 
return (str == checkstr);} 
} 
// 检 验 是 否 全 为 空格 
人 
<</ SES 


17.8 商品 查询 


商品 奏 询 分 为 简单 查询 和 高 级 奏 询 两 种 方式 。 下 面 分 别 进行 介绍 。 


17. 8. 1 简单 查询 


图 17-30 所 示 的 搜索 框 葵 套 在 每 一 个 页 面 的 头 部 ， 以 方便 顾客 随时 随地 地 搜索 商品 。 


| 商品 各 称 ,| | 关键 字 立即 查询 ，， 高 纸 查 询 
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: 画 六 型 中 显 。 击 LI 湾 
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图 17-30 ”查询 界面 


下 面 的 代码 实现 了 简单 得 询 的 处 理 功 能 。 通 过 判断 jiage 的 值 是 否 为 空 值 ， 可 以 判断 是 
人 徇 单 答 询 还 是 高 级 得 询 ， 从 而 采取 不 同 的 操作 。 


if Jiage="" then ' 普通 查询 

select case action 

ES \ 商 品名 称 

rs.open "select 
id .name, mark .introducer Dricel Eeece2 arcount -Productdate from product where 
name ™ Like "ksSearcnkeySe TD 站 中 

Case "On ` 了 商品 品牌 

rs.open "select 
id.name, mark-introduce pricel price27diSsCount produyuctdate from product where 
mark JikeW "ESearcnkeve"s "econn Li dl 

case m3" \ 商 品 简介 

rs.open "select 
id name mark introduee pricel Brice2rdiscount Broductdate from product Where 
introduce like SgSsearchnkeve "ST'" conn le 1 

end select 

else 


17. 8. 2 ”高 级 查询 窗口 


“高 级 查询 ”模块 相对 复杂 一 些 ， 界 面 设计 如 图 17-31 所 示 。 


关 健 字 : IBM 


查找 方式 : 。 ”| 商品 名 称 同 
价格 范围 : ET 


商品 分 类 : | 查询 所 有 分 类 "| 


图 17-31 高 级 查询 界面 


在 表单 内 的 输入 文本 框 和 三 个 下 拉 列 表 中 分 别 输入 或 选择 相应 的 关键 字 、 碍 找 方式 、 
价格 范围 通读 商品 分 类 ， 然 后 单 击 “ 和 查找” 按钮 ， 即 可 将 表单 提交 到 research.asp 页 面 。 下 
面 的 代码 实现 了 高 级 查询 的 商品 分 类 。 


<tr BOCOLOR fifififf > eanelione 18" stv le "edng lette: ox SPI < /ea 
<td> <!-- 碍 询 出 所 有 分 疾 的 情况 ， 并 且 以 下 拉 列 表 的 形式 显示 --> 
<SeElLrS=ServerCreateOB ect (vadodbD recordset”,) 

rs.open “select * from category order by categoryorder”,conn,1,l1 

$> 

并 有 大 轨 和 本 

< QQoOswhule not rs. eoOf%> 

<option value=”<%=rs (“categoryid’”)%>”><%=trim(rs (“category’”))%></option> 
<%$rs.movenext 

loop 

rs.close 

set Te notnina®> </select></to></tr> 


372 


17.8.3 高 级 查询 处 理 


如 果 顾 客 在 查询 的 关键 字 栏 输入 了 “IBM”， 会 返回 一 些 查询 结果 ， 如 图 17-32 所 示 。 
您 查询 的 关 健 字 是 : TB 
商品 名 称 


IEM T30-FEC IPM 2003 年 8 月 29888 元 BO% 18000 元 
IEBN T40-G1C IBM 2003 年 8 月 40888 苑 T5% 30500 元 


IBN T30-87C IEM 2003 年 01 月 29988 苑 63% 19000 元 


首页 上 一 页 下 一 页 未 页 第 1 页 共 1 页 共 查 询 到 3 件 商品 转 到 第 [1 页 而 蒜 


图 17-32 ”查询 结 


答 询 的 实现 主要 是 在 research.asp 中 完成 的 。 代 但 如 下 所 示 : 

<l——Htinelude file=s"cConneasp > 

<I—=—#tincelude file="Config.asp’ > 

<!-- 取 得 所 有 的 僵 询 参数 的 值 ,个 论 是 从 表单 或 者 查询 串 中 -> 

<%sdim action,searchkey,categoryid,Jiage 
categoryid=request.form(“categoryid”) 
iage=regquest forml( Jiage”,) 

acection=reoquest .Queryotring( act lom’ ) 

searchkey=request .QueryString (“searchkey”) 

if Categoryid="“" tNnenm categqorylid=regUuest OUuUeryotring( “categqory1Lid”) 
if Jiage=”" then Jiagqe=reduest OUeryotring( age”) 

it action=s= thnem action int (reouest form( acet Lon”),) 

if searchkey=”” then searchkey=trim(request.form(“searchkey”))%$> 
<wCaldqgsss()-:> 


<%$1if searchkey=”” then 
response.write * 对 不 起 ， 请 您 输入 查询 关键 字 ” 
response.End ` 程 序 结束 
else 
Fesponse weitev 人 全 放 的 上 人 了 于、<fTOnecolor Ted /gSsedrenkever</ Tont SY 
em Tr < toe > </ 
Const MaxPerPage=20 
gimmecotalPuEe 
dim CurrentPage 
dim TotalPages 


人 TIma 

dim sql 

if Not isempty (request (“page”)) then ` 如 果 page 的 值 不 为 裕 
currentPage=Cint (request (“page”)) 

else ` 否 则 当前 页 置 为 1 
currentPage=1 

end 1if 


如 果 jiage 的 值 为 空 ， 说 明 是 普通 查询 ， 否则 是 高 级 谷 询 。 对 于 高 级 查询 ， 目 先 判断 


categoryid 的 值 是 否 为 衬 ， 如 果 不 为 衬 ， 则 需要 考虑 商品 分 类 的 情况 。 然 后 根据 判断 “和 奏 找 
方式 ”下 拉 玉 里 选择 的 结果 ， 编 写 不 同 的 SQL 语 句 ， 这 样 记录 集 的 结果 就 可 以 得 到 了 。 


set TS=Server.CreateOb ect (“adogdb.recordset”) 
If jiage=”” then ` 兽 通 查 询 


else 
` 高 级 查询 
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Tt el 0 en SI ET A TN 
\` 商 品 分 类 不 为 至 ， 需 要 在 SQL 语句 中 考虑 categoryid 的 情况 。 如 下 面 的 语句 所 示 

select case action ` 多 约束 条 件 的 第 一 个 查找 方式 是 “商品 名 称 ” 

Caser 2 

rs.open “select 
Ld namer mark IntroduCe peel PriCe2 discCount productdate Creom Droduet where 
name like ‘%S"”&Ssearchkey&”%’ and price2<”&jiageg&” and 


Categoryid=”&categoryid,conn,1,1 


EB ma Te 


rs.open “select 
Tc name mark IntrodiCe DELICel DILiCC2 diocount produtdate tronmn Drodu et whers 
mark like ‘%S"”"&SsSearchkey&”%’ and price2<”&jiageg&” and 
Categoryid=”&categoryid,conn,1,1 

CTE ` 多 约束 条 件 的 第 一 个 查找 方式 是 “商品 简介 >” 

rs.open “select 
To namem mark InCroduce Driecel eenee2 dieoocount rodetdate Foon produet where 
mnEEOgOuce like ‘%"&SsSearchkey&”%’ and price2<”&jiageg&” and 
Categoryid=”&categoryid,conn,1,1 

Go ' 多 约束 条 件 的 第 一 个 查找 方式 是 “详细 说 明 ” 


ISO 
productdate from product where detail=’”&searchkey&”’ and price2<”&jiage&” and 
Categoryid=”&categoryid,conn,1,1 

end select 

else 
` 分 类 为 空 ， 需 要 使 用 不 同 的 碍 询 语句 。 最 大 的 区 别 是 不 再 需要 考虑 categoryid 字段 对 记录 集 的 过 滤 。 

select case action 

Ga SED 


rs.open “select 
TO AmMe mo Lm EO LC DMC SCoune Drod eate Ceomor ot Wr 
name iIkeE SSGAarCNkKeyve To AN Oro vliade CONnmn lel 

GaSe 2 

rs.open “select 
LT name marke ntrOdnGCe DILCel DELCE2 LoCoOUnt DOLdate Feom DE oet Wr 
Mark ike Coearcehkeyve "ond OroeZ < viade COnnpl 

let Me 

rs.open “select 
Trame mark LNnLeodCe DiCel DELOC2 Gnecount prodretdate tron Dro et wiere 
本 四 让 ee 

GAser 4 

rs.open “select 
To namer mark IneouCe DELoOCl DELTGS2 Cueoount detonml Deo toate from 
DEOdUct winere etarl ee Soearenkeve om DE Me Le ml 

end select 

全 MC 二 下 


现在 根据 顾客 的 碍 询 条 件 ， 不 论 使 用 的 是 傈 单 得 询 还 是 复杂 得 询 ， 数 据 库 得 询 所 返回 
的 记录 集 都 已 取得 。 下 面 的 任务 就 是 列表 显示 。 


17.9 信息 统计 


本 系统 中 的 信息 统计 包括 销售 排行 榜 和 关注 排行 榜 。 
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17. 9.1 销售 排行 


销售 排行 是 对 已 经 售 出 的 商品 作 统 计 ， 选 取出 最 受 欢迎 的 商品 。 关 注 排 行 则 是 对 顾客 
浏览 的 商品 作 统计 ， 选 取出 最 受 关注 的 商品 。 两 者 实质 上 都 是 从 数据 库 中 选 出 记录 集 ， 然 
后 再 列表 将 这 些 记 录 集 显示 出 来 。 

下 面 分 析 的 “销售 排行 ”的 部 分 主要 是 数据 库 操 作 部 分 。 

Set re=server CreateoObTecet( adodo Eee 的) 

rs.open “select 
1id renome name .comoanv mark Lntro LntroCe predate cocoouUuctoate pret ype ty 
Be ew DL LC Ol Sale nb Le FeOm oroOd EE Om uy 
Seaeasemaessc Seon el 

Ti rr nmer> 0 ne 

response.write “<p align=’center’> 数 据 库 中 暂时 无 数据 </p>” 

emo lf 


solded 标 识 的 是 商品 的 销售 数量 ，SQL 语 句 最 后 的 “order by solded desc” 是 指 将 所 有 
的 记录 和 集 按 照 solded 字 段 的 值 降 友 排列， 这 样 的 效果 就 是 所 有 的 商品 列表 时 束 会 按照 销售 
业绩 降序 显示 。 


17.9.2 关注 排行 
实现 “关注 排行 ”功能 的 代码 在 hotasp 实 现 ， 其 主要 的 选择 数据 集 的 代码 如 下 : 


SEESSEeREEESEERDeeR 人 aacabeeeeeoosete) 

ros .OBeri selecet Tq prename name comanv mark intro IntrodUuCe Dredate, 
DEC EL RE EV Ew I | I i le CO 
We TPOM DEOGete OP ov VW SO Om 


这 个 SQL 语 句 完成 的 是 从 数据 库 中 的 存储 商品 信息 的 product 表 中 选 出 所 有 需要 的 商 
品 的 信息 ， 排 序 的 方式 是 按照 浏览 次 数 (viewnum)〉 降序 排列 。 


17.10 扩充 和 提高 


至 此 , 一 个 Web 商业 应 用 的 前 台 已 经 具备 了 。 但 是 作为 一 个 真正 的 商业 应 用 ， 还 需要 
有 完善 的 后 台 管 理 界面 与 文 持 。 后 台 管 理 模块 可 以 实现 “订单 管理 人 “商品 信息 管理 入 
“用 户 管理 ”和 “网 站 配置 管理 ”等 内 容 。“ 订 单 管理 ”模块 负责 维护 和 修改 用 户 的 订单 。 
“商品 信息 管理 ”实现 对 库 中 已 有 商品 信息 的 修改 、 删 除 或 座 加 新 的 商品 ,“ 商 品 分 类 ” 
信息 的 维护 也 是 在 这 个 模块 下 实现 。 而 “用 户 管 理 ” 模 其 则 负责 前 后 合 的 用 户 信息 的 维护 ， 
包括 增加 、 修 改 和 删除 。“ 网 站 配置 管理 ” 便 块 实现 了 一 些 系统 的 诺 如 新 闻 、 公 告 等 的 设 
置 ， 实 现 与 用 户 交 流 的 “意见 反 饿 ”和 “留言 板 ” 和 常理 。 由 于 篇 幅 捷 限 ， 后 合 管理 的 页 面 
及 功能 本 书 不 作 介绍 ， 读 者 可 以 依照 前 合 的 设计 方法 完成 后 人 台 的 功能 。 

此 外 ， 还 有 一 些 其 它 的 因 系 需要 卷 虑 ， 其 中 一 个 很 重要 的 因 尼 就是 可 扩张 性 。 很 多 的 
Web 应 用 开发 乙 初 由 于 资金 、 撤 术 条 件 的 限制 没有 经 过 大 规模 的 训 试 。 到 了 真正 部 普 投 入 
运行 之 后 ， 才 发 现 顾 客 访问 Web 站 点 会 变 得 出 奇 地 慢 ， 甚 全 儿 乎 不 可 使 用 。 一 个 Web 应 用 
的 访问 量 是 难以 估计 的 ， 一 个 成 功 站 点 的 访问 量 可 能 会 在 短期 内 获得 已 大 和 持续 的 擎 升 ， 
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因此 应 用 必须 是 可 以 扩展 的 。 可 扩展 的 应 用 必须 更 多 地 考虑 与 数据 库 的 连接 技术 
(connection pool) 、 绥 存 技术 等 。 
另外 一 个 需要 重点 考 碟 的 问题 是 Web 应 用 的 安全 性 ， 重 要 的 模 块 数据 使 用 加 密 传输 ， 
或 者 使 用 现在 流行 的 SSL 颁 友 证 书 ， 都 是 可 以 考虑 的 加 强 安全 性 的 技术 。 安 全 性 是 一 个 水 
远 有 的 话题 ， 加 密 传 输 和 证 书 认 证 是 有 效 的 手段 ， 有 兴趣 的 读者 可 以 参阅 相关 的 书籍 。 
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7 入 门 与 提高 
二 局 实例 教程 


Flash CS6 中 文 版 入 门 与 提高 实例 教程 

Fireworks CS6 中 文 版 入 门 与 提高 实例 教程 

Dreamweaver CS6+Flash CS5+Fireworks CS6 网 站 与 网 页 设计 从 入 门 到 精通 
Flash CS6/actionscript 3.0 网 络 游戏 开发 从 入 门 到 精通 

Dreamweaver CS6+ASP.NET 3.5 网 站 与 网 页 设计 从 入 门 到 精通 
Dreamweaver CS6 中 文 版 标准 实例 教程 

Fireworks CS6 中 文 版 标准 实例 教程 

Flash CS6 中 文 版 标准 实例 教程 
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